Stack Overflow
Stack Overflow

Questions tagged [opacity]

Opacity is the degree to which a graphical object obscures objects which are rendered behind it.

Graphical objects which have a level of opacity less than 100% can be "seen through". The objects which are rendered behind are blended with the object in front; the resulting effect being like looking through a pane of coloured glass.

Opacity appears as an attribute in many graphical contexts, including [3D rendering], and Web Styling.

Opacity is the opposite of .

See also:

2509 questions
2521
votes
29 answers

How do I reduce the opacity of an element's background using CSS?

Is it possible, using CSS only, to make the background of an element semi-transparent but have the content (text & images) of the element opaque? I'd like to accomplish this without having the text and the background as two separate elements. When…
Stijn Sanders
  • 35,982
  • 11
  • 45
  • 67
981
votes
11 answers

CSS opacity only to background color, not the text on it?

Can I assign the opacity property to the background property of a div only and not to the text on it? I've tried: background: #CCC; opacity: 0.6; but this doesn't change the opacity.
Jay
  • 10,831
  • 9
  • 26
  • 33
856
votes
8 answers

CSS Background Opacity

I am using something similar to the following code:
Text
I expected this to make the background have an opacity of 0.4 and the text to…
John Wheal
  • 9,908
  • 6
  • 29
  • 39
537
votes
4 answers

Using CSS for a fade-in effect on page load

Can CSS transitions be used to allow a text paragraph to fade-in on page load? I really like how it looked on http://dotmailapp.com/ and would love to use a similar effect using CSS. The domain has since been purchased and no longer has the effect…
user1556266
  • 5,373
  • 3
  • 14
  • 5
516
votes
11 answers

Can you set a border opacity in CSS?

Is there a straight forward CSS way to make the border of an element semi-transparent with something like this? border-opacity: 0.7; If not, does anyone have an idea how I could do so without using images?
mcbeav
  • 11,893
  • 19
  • 54
  • 84
454
votes
14 answers

How to make blinking/flashing text with CSS 3

Currently, I have this code: @-webkit-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } .waitingForConnection { -webkit-animation-name: blinker; -webkit-animation-iteration-count: infinite; …
ojek
  • 9,680
  • 21
  • 71
  • 110
396
votes
5 answers

Opacity of background-color, but not the text

How do I make the cross-browser (including Internet Explorer 6) transparency for the background of a div while the text remains opaque? I need to do it without using any library such as jQuery, etc. (But if you know of a library that does it I'd…
Nir
  • 24,619
  • 25
  • 81
  • 117
264
votes
15 answers

Set opacity of background image without affecting child elements

Is it possible to set the opacity of a background image without affecting the opacity of child elements? Example All links in the footer need a custom bullet (background image) and the opacity of the custom bullet should be 50%. HTML
jmohr
  • 4,706
  • 4
  • 29
  • 29
244
votes
13 answers

How to Set Opacity (Alpha) for View in Android

I have a button as in the following: In my onCreate() event, I am calling Button01…
ncakmak
  • 4,014
  • 5
  • 20
  • 17
228
votes
12 answers

How to change the opacity (alpha, transparency) of an element in a canvas element?

Using the HTML5 element, I would like to load an image file (PNG, JPEG, etc.), draw it to the canvas completely transparently, and then fade it in. I have figured out how to load the image and draw it to the canvas, but I don't know how to…
Joe Lencioni
  • 10,231
  • 18
  • 55
  • 66
187
votes
2 answers

Modify alpha opacity of LESS variable

Using LESS, I know that I can change the saturation or tint of a color variable. That looks like this: background: lighten(@blue, 20%); I want to change the alpha opacity of my color, though. Preferably like this: background: alpha(@blue, 20%); Is…
ben
  • 2,037
  • 2
  • 15
  • 16
146
votes
10 answers

How to change text transparency in HTML/CSS?

I'm very new to HTML/CSS and I'm trying to display some text as like 50% transparent. So far I have the HTML to display the text with full opacity THIS IS MY TEXT However, I'm not…
Nosrettap
  • 10,940
  • 23
  • 85
  • 140
145
votes
11 answers

How to darken a background using CSS?

I have an element with text in it. Whenever I decrease the opacity, then I decrease the opacity of the WHOLE body. Is there any way I can just make the background-image darker, and not everything else?…
user3326523
144
votes
10 answers

Transparent CSS background color

I want to make the list menu's background disappear by using opacity, without affecting the font. Is it possible with CSS3?
Saranya
  • 1,451
  • 2
  • 9
  • 3
143
votes
10 answers

Opacity CSS not working in IE8

I'm using CSS to indicate the trigger text for a jQuery slide-down section: i.e. when you hover over the trigger text the cursor changes to a pointer and the opacity of the trigger text is reduced to indicate that the text has a click action. This…
user71463
1
2 3
…
99 100