IE compatible solution for opacity transparency filter

This time I will bring you the IE compatible solution for the opacity transparency filter. What are the precautions when using the opacity transparency filter? Here is a practical case, let’s take a look.

CSS3’s transparency attribute 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. Regarding browser compatibility with the opacity attribute, please continue reading:

The private attribute -moz-opacity is no longer supported from Firefox3.5+. FF used this before Mozilla 1.7 (Firefox 0.9) For private 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 of the well-made page transparency effects suddenly disappeared. Nowadays, CSS3 is everywhere, 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 writing method of -khtml-opacity 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 property, the object must have one of the three properties: height, width, position.

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

4. This attribute 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 HTML elements produce horizontal or vertical wave deformation

⑭、XRay Generate the outline of HTML elements, just like 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 gradual 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 test Write DOCTYPE, 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 select the line of code we need from above according to the browser/version to be adapted. 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 't apply the opacity, although IE8 and IE7 native do.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Use transparent to make triangles

##CSS3 browser compatibility issues

HTML5+CSS3 loading progress bar and download progress bar implementation

The above is the detailed content of IE compatible solution for opacity transparency filter. For more information, please follow other related articles on the PHP Chinese website!