CSS: if is used opacity on DIV, everything inside is lighter

Question

I have a structure like this:

<div class="abc">
  <ul>
    <li>something</li>
    ...
  </ul>
</div>

I need to apply on the abc div an opacity option. If I do it, it works, but the text inside <ul> has opacity as the abc DIV => the text in <ul> is lighter.

Is there any way to apply opacity on the DIV (its background), but not on the content inside the DIV?

Thank you

possible duplicate of http://stackoverflow.com/questions/10879045/how-to-set-opacity-in-parent-div-and-not-effect-in-child-div && http://stackoverflow.com/questions/7605462/how-do-i-remove-parent-opacity-in-css — Mark, Mar 01 '13 at 14:36

score 7 · Accepted Answer · edited May 23 '17 at 11:44

Without pulling the ul out of the div, the only way I can think of to do this would be to make the background color partially transparent using rgba if it is a solid color:

background-color:rgba(0,0,0,.5);

This would make the background be black with 50% opacity, but would only work in newer browsers.

jsFiddle: http://jsfiddle.net/jdwire/XzeGE/

To support older browsers, you could instead base64 encode a tiny png into the css (or just reference an external image). See http://en.wikipedia.org/wiki/Data_URI_scheme for more info and see https://stackoverflow.com/a/5258101/1721527 for the drawbacks of embedding a base64 encoded image in the css or html.

If the background is an image, just make it a partially transparent png.

This is definitely the way to go if it's a colour or gradient — Aram Kocharyan, Mar 01 '13 at 14:40

score 2 · Answer 2 · answered Mar 01 '13 at 14:35

If the background is a color you can use an rgba background color like this:

background-color: rgba(0, 0, 0, 0.5);

That will produce a black background with 50% opacity, without affecting the opacity of the child elements.

Please note that this doesn't work with older versions of IE (6 & 7 i think).

score 2 · Answer 3 · answered Mar 01 '13 at 14:36

You'll need a seperate div with the content and set its position over the opacity div like so:

<div class="container">
    <div class="opacity"></div>
    <div class="content"></div>
</div>

CSS

.container{
    position:relative;
}
.opacity{
    //desired opacity here
}
.content{
    position:absolute;
    top:0;
    left:0;
}

rgba like the other answers say is also a good way to go if we're talking about the background-color here.

score 1 · Answer 4 · answered Mar 01 '13 at 14:37

1

Try RGBA Instead

background-color: rgba(0,0,255,0.5);

here, last value indicates transparency in 0 to 1 level

answered Mar 01 '13 at 14:37

gtamil

532
5
10

score 1 · Answer 5 · answered Mar 01 '13 at 14:39

Only use this if you plan to have a background image. Specify an alpha value for colours.

http://jsfiddle.net/jU8MT/

<div class="abc">
    <div class="bgd"></div>
  <ul class="def">
    <li>something</li>
  </ul>
</div>


.abc {
    width: 200px;
    height: 200px;
    position: relative;
}
.bgd {
    background: red;
    opacity: 0.1;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
.def {
    z-index: 1;
}

enter image description here

score 0 · Answer 6 · answered Mar 01 '13 at 14:39

0

Have you tried to apply opacity to inside elements? something like:

div { 
    opacity: ....
}

div ul {
    opacity: .....
}

answered Mar 01 '13 at 14:39

Retired_User

1,595
11
17

That doesn't seem to make the ul completely opaque. See http://jsfiddle.net/jdwire/pjL3K/. – Joshua Dwire Mar 01 '13 at 14:53

score 0 · Answer 7 · answered Mar 03 '13 at 16:14

before i do anything as relates to internet explorer, i first call the html 5 shim to my header

<!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
  <script src="js/html5shiv.js"></script>
<![endif]-->

<!--The fav and touch icons -->

now in your CSS file,

div.abc ul { background-color: #333; }

div.abc ul li{background-color: #333;}

i think this is what you're looking for?

CSS: if is used opacity on DIV, everything inside is lighter

7 Answers7