Hello, everyone,
Myself and a co-worker are (basically) n00bs when it comes to CSS, so please forgive if this question seems elementary.
What is the best way to give opacity to the background of a DIV without affecting the text contained within?
Or will this require two divs, one for background color & opacity zIndexed underneath a transparent div that contains the text?
V/r,
@RyanReese, did you post the wrong link? As I see transparent background (or rather the lack of a background applied to the outer/content div), not opacity.
@WolfShade, not sure if there is a better way, but I’ve always used a div for the background and another tag for the content (then force the opacity back to 1 on the textual elements.
So, a div with a background color and opacity set to, say, .3 and sized to x and y on a zIndex of 5, and then another div, same size, placement, and x/y but transparent and zIndex 10 that contains the text?
V/r,
@WolfShade yes that’s what you do.
Mine does it but perhaps it’s hard to see. It’s working though. Not the wrong link @cpradio
I just slightly modified it. Not as visually pleasing but that background covering hte text is actually regular “blue” (much darker) showing opacity in effect.
Thanks, @RyanReese and @cpradio. I’ll pass that along to my co-worker. He’s a design guy who is starting to learn front-end development, so we are kind of shaking it until it works.
V/r,
Yep, that seems like the easiest way to accomplish it. If the parent has an opacity, the opacity applies to the children. I haven’t found a way to get around that yet.
Just to let you know, it IS impossible. That’s how the property works. That’s why we work around it and slide the opacity element over top of the content like in my example.
Sorry, I should have been more clear. I haven’t found a way without making the object with opacity a separate element (it can’t be the parent of the content for example).
So I don’t know if there is a way to make this work, without adding a new div that handles the opacity:
<div class="divWithOpacity">
<p>My Content</p>
</div>
Yes I understood you perfectly @cpradio. I am saying your situation is impossible. That code example you posted is impossible. Thus we do the workaround a:smile: I stated .
You basically want opacity but not to that content <p>. Opacity on a parent applies to all children. You want to negate that for the <p>. Not possible
I don’t believe in impossible 
Kind of blows that it can’t be done, sucks to have to add markup just to make a background have a bit of transparency. 
I FEEL YA BROTHA
Yeah I wish we could have opacity that allows for children to reset. Oh well. Trust me though that there is no getting around the opacity default behavior. That’s like asking a position:absolute to be recognized in the flow. Not gonna happen ;).
You said “background-color”. IF color is the only part that is to have transparency AND you do not need IE8- compatibiltiy, then {rgba(0,0,255,.35);} should be all that you need. No extra markup required.
This is for a public-facing website. I know that IE8 use is down, severely, but I think the idea is to be compatible with at least IE8, if not 7. I’m not sure on that point.
In that case, since extra markup is still your concern, you can go “old school” and create a 100x100 (or thereabouts) background image with the desired transparency. No need to change the markup when older IE support is no longer needed. Classic technology. Really.
Define the background color using rgba(red, green, blue, alpha).
The alpha is a value between 0 and 1.
For example:
#p1 {background-color:rgba(255,0,0,0.5);
will set the background color of the element with id=“p1” to red with the opacity 0.5.
Thank you for the idea, but I don’t think that will work. I probably should have worded my initial post with a little more detail, but it didn’t occur to me, until just now.
There will be an image that is ~1000px wide by ~400px tall. Floating over the image will be a div that contains a caption in white text that will have a slightly opaque background (.3) so that the underlying image can still be seen through the div, just slightly darker.
That’s what the client wants.
V/r,
If all you want is a semi transparent background colour on top of an image then use rgba as already mentioned above.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.image {
width:1000px;
min-height:450px;
border:5px solid #000;
margin:20px auto;
background:url(http://placehold.it/1000x450) no-repeat 0 0;
}
.caption {
margin:100px 50px 20px;
color:#fff;
padding:20px;
border:2px solid red;
background:rgba(100,100,100, 0.3);
}
</style>
</head>
<body>
<div class="image">
<div class="caption">
<h2>This is the caption heading</h2>
<p>This is the caption text This is the caption text This is the caption text This is the caption text This is the caption text This is the caption text This is the caption text This is the caption text This is the caption text This is the caption text This is the caption text This is the caption text This is the caption text This is the caption text This is the caption text This is the caption text </p>
</div>
</div>
</body>
</html>
Only the background color in the caption div will be transparent and not the text.
Yep, that fits fine with what’s been suggested. RGBA is the way to go, and I just let IE8 have a solid background. But you can just as easily place a semi-tranparent image as the background of that text div, as @ronpat suggested. I’ve done that in the past and it works really well. You could even give good broswers the rgba and serve up the image to IE8 with conditional comments (woo, blast from the past for me!) if you really need IE8 support.