Переопределить непрозрачный текст в прозрачном div с помощью CSS - PullRequest
Новая
       10

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

14 голосов
/ 03 марта 2010

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

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

Это возможно сделать только с CSS?

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

Ответы [ 3 ]

13 голосов
/ 03 марта 2010

Самый простой способ - стилизовать фон родительского 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 есть запатентованная опция фильтра, но, боюсь, я не могу вспомнить, как она работает. Поэтому я пропустил любую попытку описать / показать это. Если я смогу найти полезную ссылку, я добавлю ее позже. </p>

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

3 голосов
/ 03 марта 2010

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

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

1 голос
/ 03 марта 2010

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

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

...