Opacity transparency filter for IE compatible solutions

This time to bring you the opacity transparency filter of the IE-compatible solution, the use of opacity transparency filter considerations, the following is the actual case, together to see.

the transparency attributes of CSS3 opacity presumably everyone has been used everywhere. And for the browser does not support CSS3 how transparent processing, to keep the browser effect consistent, this estimate who will write, but related to the specific grammatical meaning of filter and different version of the differences between the wording, many people are not accurate, I have asked many groups of Daniel, said is not very accurate, The online version is even more multifarious. Today, the main thing is to re-review this property, and the actual test to illustrate the correct wording, and the version of IE support and writing differences.

First, the Opacity property is used to set the transparency of an element, where the value range is between 0~1 and not negative. A opacity value of 1 is completely opaque, with a value of 0 being completely transparent and visually invisible. For browser compatibility with the Opacity property, continue looking down:

Private attribute-moz-opacity is no longer supported from firefox3.5+, and FF is using this private property before Mozilla 1.7 (Firefox 0.9), Firefox 0.9- Firefox3 at the same time support-moz-opacity and opacity these two properties, now recalled that just into the workplace shortly after that, just after the Firefox upgrade to 3.5, some good page transparency effect suddenly did not have, now has CSS3 overwhelming, almost sigh time flies ah.

Ie9+ only started to support CSS3 opacity, and for IE6-IE8 we were accustomed to using the Filter Filter property to implement it. IE4-IE9 supports filter notation Progid:DXImageTransform.Microsoft.Alpha (OPACITY=XX).

IE8 introduced a special-ms-filter,ie that this is a correction to the old writing, more in line with the specification, the property value of this notation is just a pair of quotation marks, the effect is the same as before. However, this kind of writing life is not long, to IE10 filter and-ms-filter are no longer supported.

The previous version of Safari 1.2 was based on the Khtml browser kernel, and after release 1.2, the-khtml-opacity was no longer supported, and-khtml-opacity became history.

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

In addition to IE, the current mainstream browser Opera 9.0+,safari 1.2 (WebKit) +,chrome, etc. all support opacity this transparency attribute.

IE, starting with version 4.0, provides some built-in multimedia filter effects, using the following methods:

Grammar:

Filter:filter

Parameters:

Filter: The filter effect to use. Multiple filters are separated by a space.

Description

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

2. To use this property, the object must have one of the height,width,position three properties.

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

4. This property is not available on Mac platforms.

5. The corresponding script attribute is filter.

IE4.0 or above, the following 14 filters are supported:

①, Alpha gives HTML elements a transparent, progressive effect

②, Blur let HTML components produce wind-blown blur effect

③, Chroma to make a color in the image a transparent color

④, DropShadow let the HTML element have a drop shadow

⑤, Fliph let HTML components flip horizontally

⑥, FLIPV let HTML components flip vertically

⑦, Glow produces a halo and blur effect around a component

⑧, Gray to turn a color picture into black and white

⑨, Invert the effect of photographic negatives that produce pictures

⑩ and Light place a light and shadow on the HTML element

⑪ mask using another HTML element to produce an image on another component

⑫ and Shadow produce a more solid shadow.

⑬, wave causes the HTML element to deform horizontally or vertically

⑭, XRay produce an outline of an HTML component, like X-rays.

An explanation of the Alpha filter parameters

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

②, finishopacity This is a selective parameter used with opacity, while opacity and finishopacity, can produce a transparent progressive effect, cool. The table from 0 to 100,0 is completely transparent and 100 means completely opaque.

③, Style when both opacity and finishopacity are set to produce transparent progression, it is mainly to specify the progressive display shape with the red. 0: no progressive; 1: Straight line progressive; 2: round progressive; 3: rectangular radiation.

X-coordinate value of ④, StartX progressive start

Y-coordinate value of ⑤, Starty progressive start

X-coordinate value of ⑥, Finishx progressive end

Y-coordinate value of ⑦, Finishy progressive end

Here's an example to test the compatibility of filter and opacity:

HTML code

<! DOCTYPE html>  
Note: Test do not forget to write doctype, otherwise it will deviate from the actual effect.

Corresponding CSS code:

. transparent_class {/      * Required for IE 5, 6, 7 */      */*/*/Something to trigger haslayout, like zoom:1; */      W idth: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!) old khtml kernel Safari browser */      -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 based on the browser/version to be adapted. If you want to fully support all browsers, you need at least the first 5 sentences about opacity or filter. It should be stated that if you want to use both filter and-ms-filter, write the-ms-filter in front of the filter. The original description is as follows:

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

-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.

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

Make a triangle with transparent

Browser compatibility issues with CSS3

HTML5+CSS3 Loading progress bar and download progress bar implementation