Как добавить разные непрозрачности для вложенных элементов?

Question

У меня есть два вложенных элемента в HTML, и я хочу, чтобы у прозрачности была прозрачность 0,8, а у прозрачности внутри - 1.
Я думаю, что понимаю, почему это не работает, но как мне подражать этому эффекту?
Вот упрощенный HTML, который показывает проблему, я хочу, чтобы зеленый квадрат был сплошным.

<div style='background-color:red;
            width: 500px;
            height: 500px;
            border: 1px solid black;
            position: absolute;
            top:0;
            left:0;
            opacity:0.8'>

    <div style='width:150px; height:150px; background-color:green; opacity:1'>
      Some content
    </div>
</div>

Answer 1

Если вы используете свойство CSS rgba вместо свойства opacity, вы можете достичь этого:

<div style='background-color:rgba(0, 255, 0, 0.8) ;width: 500px; height: 500px; border: 1px solid black; position: absolute; top: 0; left: 0'>
<div style='position: relative; width: 150px; height: 150px; background-color: rgba(0, 0, 255, 1);'>aaaaaaaaa<br>aaaaaaaaa<br></div>
</div>

Демонстрация: http://jsfiddle.net/ScHgC/

Answer 2

Вы всегда можете использовать прогрессивное улучшение и использовать rgba на своих цветах фона

// this will only affect the div it's applied to and not it's contents
background-color: rgba(0,0,0,0.8)

Answer 3

Использование CSS2

Я нашел для вас демо, иллюстрирующее ключевую концепцию:

http://jsfiddle.net/audetwebdesign/pN69F/

Вы можете начать с добавления wrapper div, чтобы расположить два вложенных div, outer и inner. outer предшествует inner, что означает, что inner будет находиться над outer (если вы не отрегулируете значения z-index).

Вы можете установить непрозрачность на outer div, что позволит частично увидеть любой фоновый текст или изображение. Установите непрозрачность inner div на 1.0, чтобы получить полностью насыщенную окраску.

Я думаю, что большинство браузеров поддерживают непрозрачность, но посмотрите http://www.quirksmode.org/css/opacity.html для специфических для поставщика свойств CSS для обработки особенностей IE.