Achieving white opacity effect in html/css

后端未结

关注

 2  365

醉话见心

is there a way to achieve this effect in a cross-browser compatible way without having to prepare separated images?

Basically the frame on which text lays has a white ov

相关标签:

2条回答

梦谈多话

2021-02-02 07:42
Try RGBA, e.g.
```
div { background-color: rgba(255, 255, 255, 0.5); }
```
As always, this won't work in every single browser ever written.
0 讨论(0)
发布评论:

提交评论
- 加载中...

再見小時候

2021-02-02 07:46

If you can't use rgba due to browser support, and you don't want to include a semi-transparent white PNG, you will have to create two positioned elements. One for the white box, with opacity, and one for the overlaid text, solid.

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>

0 讨论(0)