Usage of CSS transparent opacity and IE transparency filter filter in various versions

CSS3’s transparency attribute opacity must be used everywhere by everyone. As for how to handle transparency in browsers that do not support CSS3 and keep the browser effect consistent, this article mainly introduces the detailed explanation of CSS transparent opacity and the most accurate usage of the transparency filter filter of each version of IE. Those who are interested can learn more.

CSS3’s transparency property opacityI believe everyone has used it everywhere. As for how to transparently process browsers that do not support CSS3 and maintain consistent browser effects, I think everyone can write this. However, when it comes to the specific grammatical meaning of filter and the different writing methods of each version, many people are not accurate. I I have asked many experts in the group, but none of them are very accurate, and the opinions on the Internet are even more varied. Today, I mainly review this attribute and conduct actual tests to illustrate the correct writing method, and the support and writing differences of various IE versions.

First of all, the Opacity attribute is used to set the transparency of an element. The value range is between 0 and 1 and cannot be negative. An opacity value of 1 is completely opaque, and a value of 0 is completely transparent and visually invisible. Please continue reading about browser compatibility with the opacity attribute:

From Firefox 3.5, the private attribute -moz-opacity is no longer supported. Before Mozilla 1.7 (Firefox 0.9), FF used this private attribute. Attributes, Firefox 0.9-Firefox3 supports both -moz-opacity and opacity attributes. Now I think back to the time when I first entered the workplace, just after Firefox was upgraded to 3.5, some well-made page transparency effects suddenly disappeared. Now CSS3 is already overwhelmingly popular, and I lament how time flies.

IE9 only started to support CSS3 opacity, and for IE6-IE8 we are accustomed to using the filter attribute to implement it. IE4-IE9 all support the filter writing method progid:DXImageTransform.Microsoft.Alpha(Opacity=xx).

IE8 introduced the special -ms-filter. IE believes that this writing method is a correction to the old writing method. , which is more in line with the specification. The attribute value of this writing method only has a pair of quotation marks, and the effect is the same as before. However, this writing method has a short lifespan. As of IE10, filter and -ms-filter are no longer supported.

The versions before Safari 1.2 were based on the browser kernel of khtml. After the release of version 1.2, the -khtml-opacity writing method was no longer supported, and -khtml-opacity became history.

Konqueror has never supported -khtml-opacity, and has supported opacity since version 4.0.

In addition to IE, the current mainstream browsers Opera 9.0, Safari 1.2 (WebKit 125), chrome, etc. all support the opacity transparency attribute.

Starting from version 4.0, IE has provided some built-in multimedia filter effects. The specific usage method is:

Syntax:

filter : filter

Parameters:

filter: The filter effect to be used. Separate multiple filters with spaces.

Description:

1. Set or retrieve the filter effect applied to the object.

2. To use this attribute, the object must have one of the three attributes: height, width, and position.

3. The filter mechanism is extensible. Third-party filters can be developed and used.

4. This property is not available on MAC platform.

5. The corresponding script feature is filter.

IE4.0 or above version supports the following 14 filters:

①, Alpha allows HTML elements to show a transparent progressive effect

② , Blur makes HTML elements have a wind-blurred effect

③, Chroma makes a certain color in the image become transparent

④, DropShadow makes HTML elements have a falling shadow

⑤, FlipH makes the HTML element flip horizontally

⑥, FlipV makes the HTML element flip vertically

⑦, Glow produces a halo and blur effect around the element

⑧, Gray Turn a color picture into black and white

⑨, Invert Produce the effect of a photo negative of the picture

⑩, Light Place a light and shadow on the HTML element

⑪, Mask Use another HTML element to generate a mask of the image on another element

⑫, Shadow Produce a more three-dimensional shadow

⑬, Wave Let the HTML element produce a horizontal Or wavy deformation in the vertical direction

⑭, XRay Produce the outline of HTML elements, just like taking X-rays

Detailed explanation of Alpha filter parameters

①, Opacity The degree of opacity, percentage. From 0 to 100, 0 means completely transparent and 100 means completely opaque.

②. FinishOpacity This is a selective parameter used together with Opacity. When Opacity and FinishOpacity are used at the same time, a transparent and progressive effect can be produced, which is cooler. From 0 to 100, 0 means completely transparent and 100 means completely opaque.

③、Style When Opacity and finishOpacity are set at the same time to produce a transparent gradient, it mainly uses red to specify the progressive display shape. 0: No gradient; 1: Linear gradient; 2: Circular gradient; 3: Rectangular radiation.

④, StartX The X coordinate value of the gradual start

⑤, StartY The Y coordinate value of the gradual start

⑥, FinishX The X coordinate value of the gradual end

⑦、FinishY Y coordinate value of progressive end

The following is an example to test the compatibility of filter and opacity:

Html code

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=utf-8 />  
<title>JS Bin</title>  
</head>  
<body>  
  <p class="transparent_class">测试透明度</p>  
</body>  
</html>

Note: Don’t forget to write DOCTYPE when testing, otherwise it will deviate from the real effect.

Corresponding CSS code:

.transparent_class {  
    /* Required for IE 5, 6, 7 */  
    /* ...or something to trigger hasLayout, like zoom: 1; */  
    width:300px;  
    height:300px;  
    line-height:300px;  
    text-align:center;  
    background:#000;  
    color:#fff;  
    /* older safari/Chrome browsers */  
    -webkit-opacity: 0.5;  
    /* Netscape and Older than Firefox 0.9 */  
    -moz-opacity: 0.5;  
    /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/  
    -khtml-opacity: 0.5;  
    /* IE9 + etc...modern browsers */  
    opacity: .5;  
    /* IE 4-9 */  
    filter:alpha(opacity=50);  
    /*This works in IE 8 & 9 too*/  
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  
    /*IE4-IE9*/  
    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);  
}

In use, we can choose what we need from the above according to the browser/version to be adapted. lines of code. If you want full support for all browsers, at least the first 5 sentences about opacity or filter are needed. What needs to be stated is that if you want to use filter and -ms-filter at the same time, please write -ms-filter in front of filter. The original description is as follows:

If you want opacity to also work in IE8′s emulating IE7 mode, the order should be:

-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; // first  
filter: alpha(opacity=50); // second

If you don't use this order, IE8 emulating IE7 doesn't apply the opacity, although IE8 and IE7 native do.

The above is the entire content of this article, I hope it will be helpful to everyone's study, more related Please pay attention to the PHP Chinese website for content!

Related recommendations:

Introduction to the use of the positioning attribute position as fixed in css

CSS uses Sprites technology to realize circles The effect of corners

Introduction to the use of Transition and Animation animation properties in CSS3

The above is the detailed content of Usage of CSS transparent opacity and IE transparency filter filter in various versions. For more information, please follow other related articles on the PHP Chinese website!