61

I'm trying to reset the opacity to 1.0 for 'Demo text 4' where its container has opacity set to 0.3. I read that I could set the text directly using: color: rgba(255, 255, 0, 1); but this will not work for me. Is there a way to achieve my goal?

<!DOCTYPE html>
<html lang="en">
<head>
<style>
#text_holder {
background: blue;
width: 500px;
height: 200px;
}
#text_holder2 {
background: blue;
width: 500px;
height: 200px;
color: rgba(255, 255, 0, 1);
}

#alpha_30 {
opacity: 0.3;
color: #ff0000;
}
#alpha_100 {
color: #ff0000;
}
</style>
</head>

<body>


<div id="alpha_100">
<div id="text_holder">
    <p>Demo text 1</p>
</div>
</div>

<div id="alpha_30">
<div id="text_holder">
    <p>Demo text 2</p>
</div>
</div>

<div id="alpha_30">
<div id="text_holder">
    <p>Demo text 3</p>
</div>


<div id="text_holder2">
    <p>Demo text 4</p>


</div>

</div>

</body>
</html>
SimonRH
  • 1,409
  • 2
  • 13
  • 23
  • 1
    Basically, you can't override the opacity of a child. The answer you might be looking for will depend on what it is you are actually trying to do. – Paulie_D Feb 19 '14 at 16:44
  • 1
    Paulie is right, opacity effects the entire element (including children) and can't be reversed by a child element. Can you be specific as to what you're trying to do? There are ways to work around it. – badAdviceGuy Feb 19 '14 at 16:58
  • I'm trying to create a background and apply an alpha =.5 and then to place some text on the background, but to show the text at alpha =1. I know I could create the bg with a graphic, but wanted to see if I could achieve the same effect with CSS. – SimonRH Feb 19 '14 at 17:03
  • 2
    Use a background-color using RGBA instead of opacity/ – Paulie_D Feb 19 '14 at 17:05
  • I don't know if it works on this type of element, but normally you can add !important after the css element style code to force it to use that code instead of the inherited styling. – easleyfixed Apr 08 '22 at 20:17

2 Answers2

50

you cannot.

If you use a plain background-color, then yes use rgba instead. 

#text_holder {
background:rgba(0, 0, 255,1);
width: 500px;
height: 200px;
}
#text_holder2 {
background: rgba(0, 0, 255,1);;
width: 500px;
height: 200px;
color: rgba(255, 255, 0, 1);
}

#alpha_30 > div {/* select child */
/*opacity: 0.3;*/
background:rgba(0, 0, 255,0.3);/* give opacity to bg color only */
color: #ff0000;
}
#alpha_100 {
color: #ff0000;
}

For an image as background, you may fake is opacity by using the main background-color in rgba. if you want an opacity of 0.3 for background, then do 1 -0.3 = 0.7 to set your rgba opacity. 

<div class="bg-img">
  <p class="text_holder"> some text</p>
</div>

.bg-img {
  background:url(http://lorempixel.com/100/100/abstract);
}
.bg-img .text_holder {
  background:rgba(255,255,255,0.3);/* here white cause body as white background */
  }

These are work around : DEMO of both (bg image at bottom of test): http://codepen.io/anon/pen/yGgpz

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • why can't you override opacity like every other property? – whitneyland Mar 03 '17 at 03:12
  • 2
    @Lee you don't just like if a parent is display:none; anything inside will be hidden, if a parent is z-index:1; any value of position children will not be more than z-index:1 aside any sibblings of the ^parent . Cascaded Style Sheet . the first word tells how CSS is suppose to work. There is a few rules than can be reset to children (borders, colors, background,...) as long as it is specific details that do not depends on layout of the parent . If a parent is set to be translucide, then it is the entire box, children included, else the rules looses it's first meaning.excuse my average english. – G-Cyrillus Mar 03 '17 at 22:04
22

Use rgba(225, 0, 0, .3) for the parent div.

Stack Snippets example:

.opaque {
  width: 500px;
  height: 500px;
  text-align: center;
  color: black;
  background: rgba(225, 0, 0, .5);
}
<div class="opaque">This text is not opaque</div>
AStopher
  • 4,207
  • 11
  • 50
  • 75
Kevin Brown
  • 12,602
  • 34
  • 95
  • 155