Learn about the application of the filter attribute in IE!

When setting opaque properties, it is often used opacity to increase the level of sense or to increase the user experience, but this property is the CSS3 property, for the compatibility of low-level browsers do not achieve the desired effect.

In general, we have to use as little as possible to browse private properties -webkit,-moz,-ms,-o , but this only solves the problem of many browsers on the market, in the face of IE, especially the ie9-version, but also appear feebly.

If you want to make the market on the browser to achieve a uniform near similar effect, it is very necessary to write on IE private properties, trigger IE haslayout features, such as:

. Opacity{opacity:0.5;filter:progid:dximagetransform.microsoft.alpha (opacity=50);/*IE6~IE8*/}


Filter is a property of CSS1, but because the old version of IE4.0~IE9 is not very supportive of the filter and the support for the browser is not stable, this attribute can only be observed as an experimental technique.

I. Filter interface filter

It is filter divided into static filters (Visual Filters) and transition transitions (transitions Reference) in IE.
The effect of the static filter can set the element's opacity, gradient, blur, contrast, lightness, and so on, while the excessive transition is focused on the animation effect of IE.

When using the IE Filter property, you must prefix it as follows:

. test{

Filter:progid:DXImageTransform.Microsoft.    /*. The following are the various filters and transition functions */}/* such as: Blur filter */.blur{filter:progid:dximagetransform.microsoft.blur ()/    *. The first letter of the function must be capitalized, the parentheses () The various values of the filter inside */}

1.AlphaImageLoader, this property is mainly for PNG transparent image for the opacity of processing, in the IE6 PNG transparent picture is actually opaque, the display will be gray background.

Grammar:

Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader ()/* Full wording */FILTER:PROGID:D XImageTransform.Microsoft.AlphaImageLoader (enabled= ' true ', sizingmethod= ', src= ' mini.jpg ')

Its value includes 2 optional values, a required value.

Properties	features	Description
Enabled	Enabled	Optional value,boolean boolean value, default value of Ture, filter enabled, false to not enable filter. All of the filter has this property value, the following is not more than one by one said.
Sizingmethod	Sizingmethod	An optional value that is set or retrieved in such a way as to display how an image is displayed at the object boundary. There are three values: crop crop the image to fit the object's dimensions image , and, by default, expand or decrease the object's bounds to fit the image's dimensions scale , and stretch or shrink the image to fill the bounds of the object;
Src	Src	Must value, introduce the picture.

Use the ie6~8 in your hand to preview the official Demo→alphaimageloader

2.Gradient, gradient filter.

Grammar:

Filter:progid:DXImageTransform.Microsoft.Gradient ()/* Full wording */filter:progid:dximagetransform.microsoft.gradient ( Enabled= ' ture ', gradienttype= ' 1 ', startcolorstr= ' #00000000 ', endcolorstr= ' #FFFF3300 ')

td> 

properties	properties	description
enabled	enabled	Optional Value, Boolean boolean, default = Ture, enable filter; False to not start With filters.
startcolorstr	startcolor	Set or retrieve the start opacity gradient value, integer int, specify an integer value, value Changes from 0 (transparent[Transparent]) to 4294967295 ([white opaque]).
	startcolorstr	Sets or retrieves the starting color value, string, value from #ff000000 to #FFFFFFFF with the default value: #FF000000, such as a value of: #AARRGGBB, then AA represents the transparency ALPHA,RR represents the Red 16 binary value, GG represents the Green 16 binary value, and BB represents the Black 16 binary value.
	endcolor	Set or retrieve the gradient value of the end opacity, as above, rarely used.
	endcolorstr	Set or retrieve the ending color value as above
gradienttype	Sets the direction of the gradient. There are two values, 1 for the horizontal direction, and 0 for the vertical gradient.

You can use Ie6~8 to preview the official Demo→gradient Filter

In conjunction with the above table, note the following style property when you actually find that the value in STARTCOLORSTR is not the same as our usual #ffffff,

Second, filter static filter

1.AlphaTo adjust the opacity of the object's contents.

Grammar:

Filter:progid:DXImageTransform.Microsoft.Alpha ()/* Full notation */filter:progid:dximagetransform.microsoft.alpha (enabled = ' ture ', gradienttype= ' 1 ', startcolorstr= ' #00000000 ', endcolorstr= ' #FFFF3300 ')

Style, set or adjust the opacity. 0 for default, 1 for linear opacity, 2 for radial gradient, 3 for rectangle gradient

Opacity, sets or adjusts the opacity value. 0~100 value, where 0 default value is full transparent and 100 is fully opaque

Finishopacity, sets or adjusts the last opacity value. 0~100 value, where 0 default value is full transparent and 100 is fully opaque

StartX, sets or adjusts the start position of the horizontal opacity, the default value is 0, which starts at the far left of the object.

FINISHX, sets or adjusts the horizontal opacity end position, the default value is 0

Starty, sets or adjusts the vertical opacity start position, with a default value of 0

Finishy, sets or adjusts the vertical opacity end position, the default value is 0

Use the ie6~8 in your hand to preview the official Demo→alpha Filter

2.BasicImage, adjusts the color processing, image rotation, or opacity of the object's contents.

Filter:progid:DXImageTransform.Microsoft.BasicImage ()/* Full wording */FILTER:PROGID:D XImageTransform.Microsoft.BasicImage (grayscale= ' x ', xray= ' x ', mirror= ' x ', invert= ' x ', opcity= ' x ', rotation= ' x ')

Grayscale, sets or adjusts the grayscale value of the object.

Invert, sets or adjusts the inverted phase of the object.

Opacity, sets or adjusts the opacity of the object.

Mask, sets or adjusts whether an object's RGB is a Mashcolor value, 0 default values, displays normal RGB values, and 1 indicates changes to Mashcolor (not commonly used)

Mirror, sets or adjusts object mirroring. 0 normal display, 1 content object will turn over.

Rotation, set or adjust the rotation of the object, 0 normal display, 1 for rotation 90°,2 for rotation 180°,3 for rotary 270°

XRay, set or adjust the X-ray of the object, Boolean, 0 normal display, 1 for X-ray, a bit like we go to the hospital to shoot X-rays effect.

Use the ie6~8 in your hand to preview the official Demo→basicimage Filter

3.Blur, sets the fuzzy value of the object.

Filter:progid:DXImageTransform.Microsoft.Blur ()/* Full wording */filter:progid:dximagetransform.microsoft.blur ( pixelradius= ' x ', makeshadow= ' x ', shadowopacity= ' x ')

Pixelradius, sets the blur radius of the object, 1~100 the value.

Makeshadow, sets whether the object is projected, Boolean, true, and False

Shadowopacity, sets the object projection opacity, 0.0~1.0, if Makeshadow is False then the value is invalid.

Use the ie6~8 in your hand to preview the official Demo→blur Filter

4.Chroma , set the color transparency of the object

Filter:progid:DXImageTransform.Microsoft.Chroma ()/* Full spelling */filter:progid:dximagetransform.microsoft.chroma (Color = ' x ')

Color to set the value of the colors.

Use the ie6~8 in your hand to preview the official Demo→chroma Filter

5.Compositor , set the composition color of the new object content, this translation is a bit of a mouthful, probably means: 2 objects, to show which one or hide which, or show their comparison after the new object.

Filter:progid:DXImageTransform.Microsoft.Compositor ()/* Full wording */FILTER:PROGID:D XImageTransform.Microsoft.Compositor (function= ")

Where the function value has 18 values, many many. Not one of them said, interested in going here to see Demo→compositor Filter

6.DropShadow To set the object's projection effect.

Filter:progid:DXImageTransform.Microsoft.DropShadow ()/* Full wording */FILTER:PROGID:D XImageTransform.Microsoft.DropShadow (offx= ' x ', offy= ' x ', color= ' x ', positive= ' x ')

OFFX, sets the x displacement of the projection, the value of the unit, the default is 5

Offy, sets the Y-displacement of the projection, the unit value, the default value is 5

Color, setting the value of the drop shadow

Positive, sets the transparent or non-transparent projection.

Use the ie6~8 in your hand to preview the official Demo→blur Filter

7.Emboss To set the object's Emboss effect.

Filter:progid:DXImageTransform.Microsoft.Emboss ()/* Full wording */filter:progid:dximagetransform.microsoft.emboss (bias= ‘‘)

Generally bias attributes do not need to be set, can be ignored, the official Demo→emboss Filter

8.Engrave , sets the carving effect of the object.

Filter:progid:DXImageTransform.Microsoft.Engrave ()/* Full wording */filter:progid:dximagetransform.microsoft.engrave ( Bias= ")

Generally bias attributes do not need to be set, can be ignored, the official Demo→engrave Filter

9.Glow , sets the glow effect of the object.

Filter:progid:DXImageTransform.Microsoft.Glow ()/* Complete */filter:progid:dximagetransform.microsoft.glow (color= ", Strength= ")

Color to set the glow color.

Strength, set the width of the glow, value units

Official Demo→glow Filter

10.Light , set the brightness of the object

Filter:progid:DXImageTransform.Microsoft.Light ()

Addambient, adding object ambient light

Addcone, add cone light source

Addpoint Adding Point Light

ChangeColor, changing the brightness color

Changestrength, changing the brightness length

Clear, remove brightness

Movelight, move the light focus.

Official Demo→light Filter

11.ICMFilter , set the object's color content to change so that it displays the color of the device as it is printed.

When the official no DEMO,IE9, this filter applies only to the screen content display effect, when the content is printed, will not be applied.

12.MaskFilter , set the object content transparent or opaque color.

Filter:progid:DXImageTransform.Microsoft.MaskFilter ()/* Full wording */FILTER:PROGID:D XImageTransform.Microsoft.MaskFilter (color= ")

13.Matrix, resize, rotate, or flip a Content object transformation using a matrix.

Filter:progid:DXImageTransform.Microsoft.Matrix ()

can set the rotation of various angles, the official Demo→matrix Filter

14.MotionBlur, set the object blur, after testing the demo feel a bit like linear blur, is the moonlight cast down the uneven blur effect.

Filter:progid:DXImageTransform.Microsoft.MotionBlur ()/* Full wording */FILTER:PROGID:D XImageTransform.Microsoft.MotionBlur (direction= ", strength=", add= ")

Direction, sets the object blur direction, illuminates from the 0°~315°.

Strength, set object blur range, unit value, initial value of 5

ADD, sets whether the image blur is overwritten on the original, Boolean, true to overwrite, false means no overwrite

Official Demo→motionblur Filter

15.Wave, set object to ripple filter effect

Filter:progid:DXImageTransform.Microsoft.Wave ()/* Complete */filter:progid:dximagetransform.microsoft.wave (add= ", Lightstrength= ", phase=", strength= ",  freq=")

ADD to set whether the filter overrides the original image, Boolean, true to overwrite, false to not overwrite

Lightstrength, brightness intensity, 0~100 value, the larger the value, the more obvious the filter effect

Phase, relative offset value, 0~100 value

Strength, sets the wave strength, the default value is 5, the larger the value, the more obvious the wave effect.

Frep, set the wave frequency, the default value is 3, the larger the value, the more obvious the wave effect.

Official Demo→wave Filter

16.Shadow, sets the object shadow effect.

Filter:progid:DXImageTransform.Microsoft.Shadow ()/* Full spelling */filter:progid:dximagetransform.microsoft.shadow (color = ", direction=", strength= ")

Color to set the shadow color.

Direction, sets the direction of the shadow, the angle is also from the 0°~315° value (with the PS projection effect is very similar. ）

Strength, set the projection intensity, the larger the value the more blurred.

Official Demo→filter

Reference: http://msdn.microsoft.com/en-us/library/ms532853 (v=vs.85). aspx

Original address:http://xiaoho.com/?p=887

Learn about the application of the filter attribute in IE!