CSS: opacity only background, not the text inside [duplicate] - css

Question

This question already has answers here:
How do I reduce the opacity of an element's background using CSS?
(29 answers)
Closed 7 years ago.
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 */
}

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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.

Answer 5

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.