Достижение эффекта белой непрозрачности в html / css - PullRequest
Новая
       16

Достижение эффекта белой непрозрачности в html / css

31 голосов
/ 19 октября 2010

Есть ли способ добиться этого эффекта в кросс-браузерном режиме без необходимости подготовки отдельных изображений?

По сути, рамка, на которой лежит текст, имеет наложение белого цвета с непрозрачностью 50%. Мне бы хотелось решение, которое не предполагает создания какого-либо другого изображения в дополнение к фону, но я не знаю, возможно ли это!

alt text

Ответы [ 2 ]

66 голосов
/ 19 октября 2010

Попробуйте RGBA, например 

div { background-color: rgba(255, 255, 255, 0.5); }

Как всегда, это не будет работать во всех написанных браузерах.

3 голосов
/ 19 октября 2010

Если вы не можете использовать rgba из-за поддержки браузера и не хотите включать полупрозрачный белый PNG, вам придется создать два позиционированных элемента. Один для белого поля с непрозрачностью, а другой для наложенного текста, сплошной. 

body { background: red; }

.box { position: relative; z-index: 1; }
.box .back {
    position: absolute; z-index: 1;
    top: 0; left: 0; width: 100%; height: 100%;
    background: white; opacity: 0.75;
}
.box .text { position: relative; z-index: 2; }

body.browser-ie8 .box .back { filter: alpha(opacity=75); }
<!--[if lt IE 9]><body class="browser-ie8"><![endif]-->
<!--[if gte IE 9]><!--><body><!--<![endif]-->
    <div class="box">
        <div class="back"></div>
        <div class="text">
            Lorem ipsum dolor sit amet blah blah boogley woogley oo.
        </div>
    </div>
</body>
...