Example of how CSS makes the background transparent and text opaque

When we design and make some web pages, we may use the translucent effect. First of all, we may think of using PNG image processing. Of course, this is a good way. The only compatibility problem is the BUG under ie6, but This is not difficult, just add a piece of js processing. But if we need a semi-transparent mask pop-up layer, such as a login box, registration box, prompt, etc., then the entire page may need to be covered by a semi-transparent mask layer. If background tiles are used, then This may not be a good idea at this time. Larger images will affect the loading speed. Smaller images will also increase the amount of rendering calculations on the page. Then you may need to use CSS filters.

Suppose there is such an example: "There is a DIV block. This DIV is black and translucent, but the content inside this DIV must remain intact and cannot be transparent." So what should we do?

If we write the HTML part like this

<div class="touMingDiv">  
    <div>  
        <h1>这是透明的层这是透明的层这是透明的层这是透明的层  
            这是透明的层这是透明的层这是透明的层这是透明的层这是透明的层  
        </h1>  
    </div>  
    <p>  
        这是透明的层,但上边的文字和图片均不透明，兼容ie7,ie8,ie9,ie10,FF,Chrome  
    </p>  
    <img  src="/static/imghwm/default1.png"  data-src="bg.jpg"  class="lazy"  / alt="Example of how CSS makes the background transparent and text opaque" >  
</div>

For CSS, we may write it like this

.touMingDiv{  
    filter:Alpha(opacity=60);  
    opacity:0.6;  
}

But after testing, we found that not only the div container is translucent, but also the div The text and pictures inside are made transparent. This effect occurs because the properties of these filters have been inherited to child elements.

We can use the following method to achieve

.touMingDiv{  
    width:800px;  
    min-height:300px;  
    color:#fff;  
    background:rgba(0,0,0,0.6);  
    background:#000 9;/*CSS Hack,只能对ie9以下浏览器ie6,ie7,ie8有效，否侧ie10,FF,Cherome会失去透明效果*/  
    filter:Alpha(opacity=60);/*只对ie7,ie8有效*/  
}  
.touMingDiv p,  
.touMingDiv div,  
.touMingDiv img{  
    position:relative;  
    /*或者是absolute，都可以使文字不透明，这样做还是为了  
    兼容ie9,ie8,ie7下背景透明而而背景上的文字不透明的效果*/  
}

Note that the above background:rgba(0,0,0,0.6); only works for ie9, ie10, FF, Chrome... .etc. is valid, excluding ie6, ie7, ie8, so we have these codes:

background:#000 9;/*CSS Hack,只能对ie9以下浏览器ie6,ie7,ie8有效，否侧ie10,FF,Cherome会失去透明效果*/  
filter:Alpha(opacity=60);/*只对ie7,ie8有效*/

In addition, we need to set the relative or absolute attributes on the child elements, so that the background can appear transparent and the text above the background can appear And the picture displays normally.

But the code here is definitely not suitable for ie6. It is recommended to use png images for ie6, and then use js to process it.

The above is the detailed content of Example of how CSS makes the background transparent and text opaque. For more information, please follow other related articles on the PHP Chinese website!