Переопределить непрозрачный текст в прозрачном div с CSS

Я пытаюсь сделать текст внутри прозрачного div без прозрачности, иначе быть полностью черным:

<div style="opacity:0.6;background:#3cc;">
    <p style="background:#000;opacity:1">This text should be all black</p>
</div>

Можно ли использовать только CSS?

Заранее спасибо

Ответ 1

Самый простой способ - создать фон родительского div с opacity/alpha:

div  {
    background: #fff; /* for browsers that don't understand the following rgba rule */
    background-color: rgba(255,255,255,0.5); /* rgb, white, with alpha at 0.5 */
}

Это, однако, не совместимо с IE.

Для совместимости с IE >= 7 вы можете использовать:

div  {
    background-image: url('path/to/partially_transparent.png');
    background-position: 0 0;
    background-repeat: repeat;
}

Я помню, что IE < 7 имеет запатентованный фильтр, но, боюсь, я не могу вспомнить, как это работает. Поэтому я пропустил какую-либо попытку описать/показать его. Если я смогу найти полезную ссылку, я добавлю ее позже.

Как отмечено easwee, непрозрачность наследуется содержащимися элементами, поэтому вы не можете ее переопределить, и именно поэтому я предпочитаю использовать подход background-color/background-image.

Ответ 2

Дочерние элементы наследуют непрозрачность. Что вы можете сделать, так это позиционировать <p> за пределами непрозрачного div и установить отрицательный запас, чтобы переместить его над ним.

Я часто сталкивался с этой проблемой и обычно решал ее так. Проблема заключается только в том, что у вас есть динамический контент, и div должен расширяться.

Ответ 3

Есть ли фон в сплошном цвете? Если это так, вы также можете использовать RGBa, чтобы выбрать прозрачный цвет фона для div, который не унаследован его дочерними элементами. Прочтите RGBa Browser Support для получения дополнительной информации, обходной путь для IE и другой решение.

Если фон div не является сплошным, вы можете использовать прозрачный PNG в качестве фона. Не забудьте использовать AlphaImageLoader в IE6 (и 5.5).