New css Filter

Well, we don't want to replace them with new ones. We hope that the old css Filter will bring new life to us. When some of the new css3 features make everyone speak out, the filters in ie have already silently implemented similar features. Okay. Let's take a look.

Interface filter:
AlphaImageLoader:

Syntax:
Filter: progid: dximagetransform.microsoft.alphaimageloader(src#x.png, sizingMethod = image)
Note that ie8 adopts the-ms-filter: "progid: DXImageTransform. Microsoft. Alpha (...)" method, as shown below.

Note:

SizingMethod: the default image value is equivalent to placing an img inside, which will open the outer container; crop is used to set the background image; scale is used to stretch the image based on the size of the outer container.
Gradient:
Gradient effect, because only startColor and endColor can be specified, and stop cannot be added, so the actual application is often unable to meet the requirements.

Syntax:
Filter: progid: DXImageTransform. Microsoft. Gradient (startColorStr = # FF000000, endColorStr = # FF000000, gradientType = 0)
Note:

StartColorStr: note that the ARGB format is used here. It is neither common RGB nor RGBA.
GradientType: Default 0 vertical, 1 horizontal.
Comparison:
In contrast, the new css is too powerful, with stop, weight, and multiple directions.

Firefox 3.6:-moz-linear-gradient (top, blue, white 80%, orange)
Safari 4, chrome:-webkit-gradient (linear, left top, right bottom, from (# ff0), color-stop (0.5, orange), to (# ff0000 );
Static filter:
Alpha:
Transparent effect.

Syntax:
Filter: progid: DXImageTransform. Microsoft. Alpha (opacity = 100, finishOpacity = 0, style = 1, startX = 0, startY = 0, finishX = 100, finishY = 100)
Note:

Style: Generally, the default value 0 is used to set the transparency of the entire element. 1 indicates a linear gradient. All other attributes are used. 2 indicates the radioactive gradient, that is, the elliptical, from the inside out. 3 indicates the rectangular gradient, that is, the x-shaped, from the outward.
Comparison:
Other browsers: opacity: 0.8
BasicImage:
Many, Gray effect, image effect, mask effect, transparent effect, rotation effect, and X-ray effect.

Syntax:
Filter: progid: DXImageTransform. Microsoft. BasicImage (grayScale = 1, invert = 0, mask = 1, mirror = 0, opacity = 100, rotation = 1, xray = 1)
Note:

Mask: uses the transparent part as the mask.
Maskcolor: the attribute in css is invalid, but it is valid when it is specified in js. When the value of mask is 1, the color of the opaque part, for example, 0xff000000, is in 0x0000rggbb format.
Rotation: 1 indicates clockwise rotation of 90 degrees, 2 indicates 180,3 indicates 270. Xray: take an X-ray image with a grayScale image.
Comparison:
In addition to the angle and reference point, the rotation of css is the biggest difference. After css rotation, the original position is occupied, just like position: relative.

Firefox 3.5:-moz-transform: scale (0.75) rotate (0deg) translate (0px, 0px) skew (0deg, 0deg);-moz-transform-origin: 0% 0%
Safari 4, chrome:-webkit-transform: scale (0.75) rotate (0deg) translate (0px, 0px) skew (0deg, 0deg);-webkit-transform-origin: 0% 0%
Opera 10.5:-o-transform: scale (0.75) rotate (0deg) translate (0px, 0px) skew (0deg, 0deg);-o-transform-origin: 0% 0%
Blur:
Blur.

Syntax:
Filter: progid: DXImageTransform. Microsoft. Blur (makeShadow = true, pixelRadius = 2.0, shadowOpacity = 0.75)
Note:

MakeShadow: whether to convert to shadow.
Chroma:

Syntax:
Filter: progid: DXImageTransform. Microsoft. Chroma (color = # ff0000ff)
Note:

Color: the specified color value is transparent in the # AARRGGBB format.
Compositor:

Syntax:
Filter: progid: DXImageTransform. Microsoft. Compositor (function = 0)
Note:

Function: Specify the function to be merged. The value is 0-10, 19-25.
DropShadow:
Shadow effect.

• 2 pages in total:
• Previous Page
• 1
• 2
• Next Page