Examples of how CSS makes background transparent and text opaque

Source: Internet
Author: User
In our design to make some Web pages may use the translucent effect, first we may think of PNG image processing, of course, this is a good way, the only compatibility problem is IE6 under the bug, but this is not difficult, plus a section of JS processing on the line. But if we need a translucent mask of the pop-up layer, such as landing box, registration box, hints, etc., this may require the entire page to be covered by a translucent mask layer, then such as with the background tile, this moment may not be a good way, the picture will affect the loading speed, A small picture will also increase the amount of page rendering calculation, then you may need to use a CSS filter.

If there is an example: "There is a div block, this div is black translucent, but the contents of this div to remain intact, not transparent", then what should we do?

If we write this in the HTML section,

<div class= "Toumingdiv" >      <div>          

For CSS, we might be writing this.

. toumingdiv{      Filter:alpha (opacity=60);      opacity:0.6;  }

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

We can use the following hair method to achieve

. toumingdiv{      width:800px;      min-height:300px;      Color: #fff;      Background:rgba (0,0,0,0.6);      Background: #000 9;/*css Hack, can only IE9 the following browser ie6,ie7,ie8 effective, no side ie10,ff,cherome will lose transparency effect *      /Filter:alpha (OPACITY=60);/* Valid for IE7,IE8 only *  }  . toumingdiv p,  . Toumingdiv Div,  . Toumingdiv img{      position:relative;      /* or absolute, can make the text opaque, this is to be compatible with the background      of the ie9,ie8,ie7 under the transparency of the text on the background opaque effect */  }

Note that above Background:rgba (0,0,0,0.6); only for ie9,ie10,ff,chrome ... such as valid, not including IE6,IE7,IE8, so with these few lines of code:

Background: #000 9;/*css Hack, can only IE9 the following browser ie6,ie7,ie8 effective, no side ie10,ff,cherome will lose transparency effect *  /Filter:alpha (opacity=60); * Only valid for IE7,IE8 * *

You also set the relative or absolute property on the child-level elements to make the background transparent and the text and picture above the background appear normally.

But the code here is resolutely not suitable for IE6, it is recommended for IE6 to use PNG picture bar, and then use JS to do a bit of processing.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.