CSS: opacity only background, not the text inside

Question

I have this registration form box, and i really like how the background gets opacity, transparent with 25% (85), but then i notice that the text and the form elements also gets darkened alittle and such, so i wonder how to do this only with the border and background and not with the stuff inside the box?

#regForm {
z-index:11;
position: absolute;
top: 120px;
left: 500px;
background: #000;
color: #FFF;
width: 500px;
height: 240px;
border: 6px solid #18110c;
text-align: center;
margin: 40px;
padding: 1px;
  opacity: 0.85;
  -moz-opacity: 0.85; /* older Gecko-based browsers */
  filter:alpha(opacity=85); /* For IE6&7 */

}

meder omuraliev · Accepted Answer · 2010-08-01T17:05:51.423

14

The easy way would be to move the text into a separate div, like so. Basically you apply the opacity to a separate div and position the text on top...

<div id="parent">
   <div id="opacity"></div>
   <div id="child">text</div>
</div>

div#parent { position:relative; width:200px; height:200px; }
div#child { position:absolute; width:200px; height:200px; z-index:2; }
div#opacity { position:absolute; width:200px; height:200px; z-index:1; }

The other route would be rgba. Don't forget there's a separate css property to feed IE since it doesn't support the rgba property. You can also feed a transparent png.

#regForm {
   background: rgb(200, 54, 54); /* fallback color */
   background: rgba(200, 54, 54, 0.5);
}

And for IE...

<!--[if IE]>

   <style type="text/css">

   .color-block {
       background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
       zoom: 1;
    } 

    </style>

<![endif]-->

Personally I'd go with the first option because it's less of a hassle.

edited Aug 01 '10 at 17:05

answered Aug 01 '10 at 16:59

meder omuraliev

183,342
71
393
434

Rgba is a great idea, but not supported by IE6 and 7. – Pekka Aug 01 '10 at 17:00
It is, through a filter. – meder omuraliev Aug 01 '10 at 17:01
The first solution is great, thank you – Karem Aug 01 '10 at 21:15
1

As of 2015, the rgba solution is far, far better because you don't have to have fixed dimensions for the divs, and you don't need to mess with z-indexes. IE6 and 7 are virtually extinct. – Dan Dascalescu Jun 02 '15 at 04:32

score 6 · Answer 2 · answered Aug 01 '10 at 17:05

RGBA is the way to go if you're only looking for a css solution. It is possible to use a solid colour as fallback for the old browsers which can't use RGBA.

.stuff {
  background-color: rgb(55, 55, 55);
  background-color: rgba(55, 55, 55, 0.5);
}

You can also fallback on an image:

.stuff2 {
  background: transparent url(background.png);
  background: rgba(0, 0, 0, 0.5) none;
}

Here is all you need for getting this to work in all evil versions of IE: http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer

score 4 · Answer 3 · answered Aug 01 '10 at 17:06

Your best bet will probably be to use semi-transparent PNGs for your background, or to set the colors for the background and border using RGBa. PNGs will work well if you don't mind the extra markup you'll need to make a flexible-width container, but they also aren't supported in IE6 (if that's a concern).

RGBa is less widely-implemented across browsers, but if the transparency is only used for visual flair, then it's a good place to use some progressive enhancement.

For RGBa, you'll need to add an extra line as a fallback:

#regForm {
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5);
    border-color: rgb(24, 17, 12);
    border-color: rgba(24, 17, 12);
}

Any browser that doesn't recognize the RGBa declaration will simply use the plain RGB.

CSS-Tricks article on RGBa across browsers

As of 2015, you should use rgba. IE6 is fortunately extinct, and far worse things will break in some stray IE6 than the background color. — Dan Dascalescu, Jun 02 '15 at 04:34

score 1 · Answer 4 · edited Feb 01 '14 at 14:09

1

No need to do all those stuff like no need to apply positions on a div then opacity, here is very simple way to achieve it, background: rgba(0, 0, 0, 0.6);

only you have to use background color with opacity value.

edited Feb 01 '14 at 14:09

Ondrej Janacek

12,486
14
59
93

answered Oct 18 '13 at 06:16

Sumit

698
4
11

1

This is basically the same answer as Derek's, only without mentioning PNGs. – Dan Dascalescu Jun 02 '15 at 04:33

score -2 · Answer 5 · answered Aug 01 '10 at 17:00

-2

Cant't be done: Any child elements will inherit the parent's opacity.

I your case it's easy though - just use two divs. Have the background image in one and apply the opacity, and put the content into the second one. Use position: absolute and z-index to place them on top of each other.

answered Aug 01 '10 at 17:00

Pekka

442,112
142
972
1,088

No. Use rgba as the other answers suggest. – Dan Dascalescu Jun 02 '15 at 04:34

CSS: opacity only background, not the text inside

5 Answers5

Linked