Share how to handle translucent styles in CSS

In projects, we often encounter situations where we need to set translucency, such as pictures, text, containers, backgrounds, etc. Every time we use it, we forget how to do it. Now I have time to make a summary for my own convenience, and also share it with others. Everyone, if you need anything, you can come and take a look.

1. Element container is transparent

 .div{
opacity: 0.5;   /* Firefox、Chorme、Opera等主流浏览器识别 */
filter:alpha(opacity=50);   /* IE6及以上IE浏览器识别 */
 }

Instructions:

1. Opacity:* The value is between 0-1, from fully transparent to opaque Increasingly, the default is opaque after exceeding 1;

2. filter:alpha(opacity= *) has a value between 0-100, the same as above;

3. After using this attribute, All child elements within the element container are inherited, that is, all will be translucent.

2. Element background is transparent

 .div{
     background: rgba(0,0,0,.5);    /* Firefox、Chorme、Opera等主流浏览器识别 */ 
     filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#7f000000, endColorStr=#7f000000);   /* IE6及以上IE浏览器识别 */
 }

Description:

1. background:rgba(m n) where m is the rgb color value and n is the transparency , the value is between 1-100, the same as the first one above;

2. startColorStr=m, endColor=n where m and n are composed of two parts, the first 2 digits are transparency, and the last 6 digits It is sixteen color values. For example, 7f represents a transparency of 0.5, and 000000 is black (cannot be abbreviated to 000);

3. In the second point, when m=n, it is uniformly transparent, and when ≠, it is gradient transparent. Below is a set of the first two Transparency data corresponding to a value, in the format of rgb transparent value--IEfilter value:

0.1 -- 19 | 0.2 -- 33 | 0.3 -- 4c | 0.4 -- 66 | 0.5 -- 7f | 0.6 - - 99 | 0.7 -- b2 | 0.8 -- c8 | 0.9 -- e5 |

3. Picture transparency

Explanation: In fact, it is for IE6. IE7 and above browsers directly support translucent images. There are many methods, and experts have summarized nearly 7 or 8 methods. The one I commonly use is the following one:

1. First, download png.js online.

2. At the bottom of your page, load this paragraph between the body closing tag and the html closing tag:

<!--[if lte IE 6]>
<script src="js/png.js"></script>
<script type="text/javascript">
    DD_belatedPNG.fix(&#39;img, .logo,.ico&#39;);
</script>
<![endif]-->

3. Then make sure the path is not written incorrectly. Finally, just add the image element name or class and ID name that needs to be translucent in DD_belatedPNG.fix("").

The above is the detailed content of Share how to handle translucent styles in CSS. For more information, please follow other related articles on the PHP Chinese website!