Opacity for background color, but not text?

HTML & CSS
21

I’m a bit confused. @RyanReese and @cpradio were discussing how opacity on a parent applies to all children, so the opacity would also affect the text. But several others are saying that the rgba() would affect ONLY the background transparency and not any children within??

I’ll mention that to my co-worker. I don’t know how much effort he’s already put in to the double div solution.

Thank you, all, for your help. We really appreciate it.

V/r,

:slight_smile:

1 Like
22

What’s confusing about that? The opacity property and RGBA are two completely separate things.

Perhaps you were confused when we were discussing opacity. We were talking about the opacity property, not the actual opacity EFFECT itself.

1 Like
23

Yep, welcome to CSS. I knew of the opacity property, but didn’t realize that rgba function permitted applying opacity as well. This ultimately solves the problem and doesn’t require additional markup (which is a great benefit)

24

Yeah now I remember why my example originally had an image - RGBA does apply to background color but not images.

Edit-Made a note on my demos page that RGBA can be used in place of it. When this demo was originally created, RGBA had pretty poor IE support IIRC so it wasn’t really a cross-browser solution. Either way, it’s a good demo if you need to use background images and not just a color.

2 Likes
25

rgb describes the colour (red green and blue) and the ‘a’ at the end is the opacity level (between 0 and 1).

‘background:rgba(100,100,100, 0.3);’

For older browsers that don’t support rgba (ie8 and below you can just supply a solid color).

e.g.

div{
background:rgb(100,100,100);/* old browsers */
background:rgba(100,100,100, 0.3);    
}

You can make IE8 and below also work if you use some old hacks.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body { background:red }
.wrap {
    background-color: rgba(255, 255, 255, 0.50);
    width:300px;
    padding:20px;
    margin:auto;
}
</style>

<!-- fix for ie8 and under -->
<!--[if lte IE 8]>
<style type="text/css">
.wrap{
    filter:Alpha(Opacity=50);
    background-color:#fff;/* fallback */
}
.inner{position:relative;zoom:1.0}/* stops opacity from reaching text in IE*/
</style>
<![endif]-->

</head>
<body>
<div class="wrap">
        <div class="inner">
                <p>Lorem Ipsum dolor sit amet. Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.</p>
        </div>
</div>
</body>
</html>
26

Thanks, everyone!!

I just got word from my co-worker. Not only did that work, but it also fixed a second problem that he was having with something else. :smile:

Since IE8 (according to current browser stats) is around 4%, we won’t worry about IE8 compatibility. It looks GREAT in IE10 (standards mode) and FireFox.

Thanks!!

V/r,

:slight_smile:

2 Likes
27

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.