Наследование непрозрачности CSS3 - PullRequest
Новая
       14

Наследование непрозрачности CSS3

1 голос
/ 24 октября 2011

Я пытаюсь использовать Непрозрачность, чтобы сделать фон полупрозрачным, но любой контент, который я помещаю в div, также принимает полупрозрачность. Кто-нибудь знает, как я могу обойти это? Вот этот код: 

<div class="serviceContainer"> //The transparent div
    <div class="overflowAuto">
        <div class="left">
            <asp:Image ID="img" runat="server" />
        </div>
        <div runat="server" id="divTitle" class="title table centreWithMargins">
        </div>
    </div>
    <div runat="server" id="divText">
    </div>
</div>

и css: 

.serviceContainer {width:350px; display:table; opacity:0.2; filter:alpha(opacity=20); background-image:url('../Images/glass.jpg'); background-repeat:no-repeat; background-position:center;}
.serviceContainer img, p {opacity:1.0; filter:alpha(opacity=100);} //I tried to set the opacity of the contained elements, but it didnt work

Спасибо

Ответы [ 3 ]

2 голосов
/ 24 октября 2011

Это зависит от размера изображения "../Images/glass.jpg", но, возможно, самый простой и кросс-браузерный способ - преобразовать это изображение в полупрозрачное png-изображение.

Другой, не очень чистый и кроссбраузерный способ (не работает в ie6 и ie7) будет использовать: перед псевдоклассом.

Пример кода: http://jsfiddle.net/ZXDvc/

2 голосов
/ 24 октября 2011

Не используйте прозрачность для создания прозрачности, используйте rgba (x, x, x, y), где y - уровень прозрачности от 0 до 1:

пример: 

#something { background: rgba(0, 0, 0, .6); }
1 голос
/ 24 октября 2011

Непрозрачность наследуется от родителя, поэтому независимо от того, что вы установили для детей, они всегда будут иметь непрозрачность родителя.

Существует множество хаков и обходных путей, но в целом самое простое решение - поместить img / p в отдельный контейнер, который расположен (абсолютно или иначе) прямо поверх фонового контейнера.

...