The most accurate usage of CSS transparent opacity and IE filter filters

OpacityEveryone must have used it everywhere. For browsers that do not support CSS3, it is estimated that all users will write this statement to ensure the consistency of the browser effect. However, the syntax meanings of filter are different from those written in different versions, many people are not accurate. I have asked a lot of experts in the group, but they are not very accurate. The online statements are even more varied. Today, I will review this attribute and test it to explain the correct writing method, which is different from the support and writing of IE versions.

The Opacity attribute is used to set the transparency of an element. The value ranges from 0 ~ Between 1, cannot be negative. When the opacity value is 1, it is completely opaque. If the value is 0, it is completely transparent and invisible visually. For more information about the browser's compatibility with the opacity attribute, see:

From Firefox3.5 +, the Private Attribute-moz-opacity is no longer supported. FF used this private attribute before Mozilla 1.7 (Firefox 0.9, firefox 0.9-Firefox3 supports both the-moz-opacity and opacity attributes at the same time. Now, we can recall that shortly after entering the workplace, Firefox was upgraded to 3.5, some of the page transparency effects have suddenly disappeared. Today, CSS3 is already overwhelming, with a sigh of relief.

IE9 + began to support CSS3 opacity, and for IE6-IE8 we are used to using filter attributes to achieve. IE4-IE9 supports filter writing progid: DXImageTransform. Microsoft. Alpha (Opacity = xx ).

IE8 introduces a special-ms-filter. The attribute value of this method only has one pair of quotation marks, and the effect is the same as before. However, this method does not have a long life, and IE10 does not support both filters and-ms-filters.

Safari 1.2 and earlier versions are khtml-based browser kernels. after its release, version 1.2 no longer supports-khtml-opacity writing, and-khtml-opacity becomes a historical version.

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

In addition to IE, mainstream browsers such as Opera 9.0 +, Safari 1.2 (WebKit 125) +, and chrome all support the opacity transparency attribute.

IE has provided some built-in multimedia filter effects since version 4.0. The specific usage is as follows:

Syntax:

Filter: filter

Parameters:

Filter: the filter effect to be used. Multiple filters are separated by spaces.

Note:

Sets or retrieves the filter effect applied to an object.
To use this attribute, the object must have one of the three attributes: height, width, and position.
The filter mechanism is scalable. Third-party filters can be developed and used.
This attribute is unavailable on MAC platform.

The script feature is filter.

IE4.0 and later versions support the following 14 filters:

Filter Name Description

Alpha makes HTML elements transparent and progressive
Blur allows HTML elements to be blurred by the wind
Chroma converts a color in the image to a transparent color.
DropShadow gives HTML elements a Falling Shadow.
FlipH enables horizontal flip of HTML elements
FlipV vertical flip of HTML elements
Glow emits a halo and blur around the component.
Gray turns a color image into black and white
The effect of Invert on generating photo negatives
Light places a Light and shade on the HTML Element
Mask uses another HTML component to generate an image Mask on another component.
Shadow generates a relatively three-dimensional Shadow.
Wave causes horizontal or vertical deformation of HTML elements
XRay generates the outline of HTML elements, just like X-ray.

Alpha filter parameters

Parameter description value description

Opacity: the degree of Opacity, percentage. From 0 to 100, the 0 table is completely transparent, and indicates completely opaque.
FinishOpacity is a selective parameter used with the same Opacity. When both Opacity and FinishOpacity are used, transparent and progressive effects can be produced, which is cool. From 0 to 100, the 0 table is completely transparent, and indicates completely opaque.
Style when both Opacity and finishOpacity are set to generate a transparent progressive display, it mainly uses the red to specify the progressive display shape. 0: no progressive; 1: Linear progressive; 2: Circular progressive; 3: rectangular radiation.
X coordinate value starting from StartX progressively
Y coordinate value starting from StartY progressively
X coordinate value of FinishX ending progressively
Y coordinate value of FinishY Gradual completion

The following uses an example to test the compatibility between the filter and opacity:
Html code

Test transparency Note: Do not forget to write DOCTYPE for the test; otherwise, the test results may deviate from the actual results.
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 !) 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 desired code line from the browser/version above. To fully support all browsers, at least the first five statements about opacity or filter are required.

If you want to use both filter and-ms-filter, write-ms-filter before the filter. The original text is described as follows:

If you want opacity to also work in ie8's emulating IE7 mode, the order shocould be:

 

-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; // firstfilter: 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.

Statistics-based CSS property support can refer to the caniuse website http://caniuse.com/css-opacity