How to override opacity for a child

This question already has an answer here:

How do I give text or an image a transparent background using CSS? 26 answers

---

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

---

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

Fiddle example: http://fiddle.jshell.net/f93zT/

链接地址: http://www.djcxy.com/p/28076.html

上一篇: 如何在HTML5元素中设置透明背景

下一篇: 如何覆盖孩子的不透明度