CSS implements background transparency while text on the background is not transparent. css background text is not transparent.

CSS implements background transparency while text on the background is not transparent. css background text is not transparent.

We may use translucent effects when designing and creating some webpages. First, we may think of PNG Image Processing. Of course this is a good solution, the only compatibility problem is the BUG in ie6, but this is not difficult, just add a js processing. However, if we need a pop-up layer of a translucent mask, such as a login box, registration box, or prompt, the entire page may be overwritten by a translucent mask layer, if the background is tiled, it may not be a good method at this moment. If the image size is large, the loading speed will be affected. If the image size is small, the page rendering workload will also be increased, then you may need to use the CSS Filter.

Suppose there is an example: "There is a DIV block. This DIV is black and translucent, but the content in this DIV should be kept in the original State and should not be transparent." What should we do?

If the HTML part is written in this way

1234567891011

<div class="touMingDiv">    <div>        <h1> This is a transparent layer.            This is a transparent layer.        </h1>    </div>    <p>        This is a transparent layer, but the text and images above are not transparent, compatible with ie7, ie8, ie9, ie10, FF, Chrome    </p>    <img src="bg.jpg"/></div>

For CSS, we may write it like this.

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

However, after testing, we found that not only is the div container translucent, but the text and images in the div are transparent. As the attributes of these filters have been inherited to sub-elements, this effect will occur.

We can use the following method to implement

123456789101112131415

.touMingDiv{    width:800px;    min-height:300px;    color:#fff;    background:rgba(0,0,0,0.6);    background:#000 9;/* CSS Hack, which is only valid for ie6, ie7, and ie8 browsers under ie9. If it is not, ie10, FF, and Cherome will lose the transparency effect */    filter:Alpha(opacity=60);/* Only valid for ie7 and ie8 */}.touMingDiv p,.touMingDiv div,.touMingDiv img{    position:relative;    /* Or absolute can make the text opaque.    Compatible with ie9, ie8, and ie7. The background is transparent while the background text is not transparent */}

Note that the above background: rgba (0.6, 0,); only for ie9, ie10, FF, Chrome... this Code does not include ie6, ie7, and ie8:

12	background:#000 9;/* CSS Hack, which is only valid for ie6, ie7, and ie8 browsers under ie9. If it is not, ie10, FF, and Cherome will lose the transparency effect */filter:Alpha(opacity=60);/* Only valid for ie7 and ie8 */

In addition, the relative or absolute attribute must be set for child-level elements so that the background is transparent and the text and images on the background are displayed normally.

However, the code here is definitely not suitable for ie6. We recommend that you use a png Image for ie6 and then use js for processing. For details, refer to my other article.