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

Question

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

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

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

Действительно ли это возможно сделать только с CSS?

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

14

html css overriding css3 opacity

задан mager 3 March 2010 в 17:33

3 ответа

Другие вопросы по тегам:

html css overriding css3 opacity

Похожие вопросы:

score 3 · Answer 1

Дочерние элементы наследуют непрозрачность. Что вы можете сделать, так это расположить

за пределами непрозрачного div и установить отрицательное поле, чтобы переместить его поверх него.

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

score 13 · Answer 2

Самый простой способ - стилизовать фон родительского 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.

score 1 · Answer 3

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

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