Как переопределить непрозрачность для ребенка

Я пытаюсь использовать reset непрозрачность 1.0 для "Демо-текста 4", где его контейнер имеет непрозрачность, равную 0,3. Я читал, что я могу установить текст напрямую, используя: color: rgba (255, 255, 0, 1); но это не сработает для меня. Есть ли способ достичь моей цели?

<!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>

Ответ 1

вы не можете.

Если вы используете простой фоновый цвет, тогда да вместо этого используйте rgba.

#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;
}

Для изображения в качестве фона вы можете подделать непрозрачность, используя основной фоновый цвет в rgba. если вам нужна непрозрачность 0,3 для фона, тогда сделайте 1 -0,3 = 0,7, чтобы установить непрозрачность rgba.

<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 */
  }

Это работа: DEMO обоих (изображение bg внизу теста): http://codepen.io/anon/pen/yGgpz

Ответ 2

Используйте rgba(225, 0, 0, .3) для родительского div.

Пример скрипта: http://fiddle.jshell.net/f93zT/