Родительский div прозрачный фон, но не влияет на прозрачность дочернего div 

<div class="container">
    <div class="site_content">
        some stuff, images etc
    </div>
</div>


.container{
    background-color:#333;
    }

Я бы хотел, чтобы у .container div была непрозрачность 80%, но содержимое .site_content было на 100%

Настройка непрозрачности css влияет на все дочерние элементы. Есть ли способ сделать это? С jQuery?

Из-за того, как это будет использоваться, я предпочел бы избежать техники позиционирования другого прозрачного div для достижения эффекта.

Ответы

Ответ 1

Вам нужно использовать свойство фона RGBA в контейнере div. background: rgba(64, 64, 64, 0.5). 64, 64, 64 - значения цвета RGB. и 0,5 - значение непрозрачности. Теперь родитель может иметь собственное значение непрозрачности, не затрагивающее детей. Это полностью поддерживается FireFox, Opera, Chrome, Safari и IE9.

Проверьте рабочий пример http://jsfiddle.net/Rp5BN/

Для поддержки IE 5.5 до 8 нам нужно использовать градиентный фильтр CSS для конкретного поставщика: "Итак, вам нужно добавить это.

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f404040, endColorstr=#7f404040);

Где 7f представляет 127, то есть 50% непрозрачность и 404040 - цвет.

Проверьте рабочий пример в IE http://jsfiddle.net/Rp5BN/2/

Ответ 2

Самое разумное решение:

.alpha60 {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 to 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; 
}