Непрозрачность элемента CSS, не влияющая на прозрачность его содержимого. - PullRequest
Новая
       5

Непрозрачность элемента CSS, не влияющая на прозрачность его содержимого.

0 голосов
/ 28 июля 2010

Я пытаюсь создать <div> с непрозрачностью 60%.Я хочу, чтобы содержимое этого <div> было четким и непрозрачным.

У <div> с классом white_bg должен быть белый цвет фона с прозрачностью 60%, но текст и изображение внутричто <div> должно быть ясным и совсем не прозрачным.

Возможно ли это?

Обратите внимание, что текст в абзаце с классом main_content будет динамическим, а высота всегда будет изменяться, поэтому я не могу просто установить ширину и высоту для класса white_bg и использоватьпоместите абсолютное и поместите его сразу за абзацем.

HTML 

<div class="white_bg">
    <h1 class="main_titles">Toon Boom Animate</h1>
    <h6 class="subtitles">The Most Reliable Flash Animator Companion</h6> 

    <p class="main_content">
    <img class="floatright" src="images/images.jpg" alt="" />
              text comes here
    </p> 
</div>

Ответы [ 6 ]

3 голосов
/ 28 июля 2010

Вы можете использовать rgba () css3, чтобы установить цвет фона с альфа-значением, а затем использовать прозрачный png для IE.

2 голосов
/ 28 июля 2010

Вам лучше использовать полупрозрачный png в качестве фона.

0 голосов
/ 13 октября 2014

Используйте полупрозрачное изображение или примените этот CSS к вашему элементу: 

.white_bg {
    background-color: rgba(255, 255, 255, 0.5);
}
0 голосов
/ 07 сентября 2014

Я ставлю код для Chrome, FF и IE. Первый код работает на ie9 и выше, а второй - ниже ei9 

background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');
0 голосов
/ 11 апреля 2011

Либо semi-trans png, как упоминает fantactuka, либо используйте положение, чтобы размещать непрозрачный контент поверх вашего прозрачного элемента в виде этого сообщения в блоге:

http://css -tricks.com / non-transparent-элементы внутри-прозрачные-элементы /

0 голосов
/ 28 июля 2010

Для вас white_bg класс используйте это: 

.white_bg
{
    filter:alpha(opacity=60);
    -moz-opacity:0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6;
}

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

...