Achieving white opacity effect in html/css

后端 未结 2 377
醉话见心
醉话见心 2021-02-02 07:26

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: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); }
    
    
        
    Lorem ipsum dolor sit amet blah blah boogley woogley oo.

提交回复
热议问题