The effects of CSS filters are described in detail

Sometimes, we need to add some special effects to the images in the Web page, such as transparency, distortion, shadow or flip, and so on, we usually think of using Photoshop and other graphics software to deal with, in fact, we can also use CSS (Cascading style table) to provide some filters to deal with, This is a very good thing for users who are unfamiliar with Photoshop.

Let's start with a simpler introduction to a few filters with no parameters.

1.Gray Filter

The effect of the gray filter is to produce black-and-white effects

How to use:

The following is a reference fragment:

2.Invert Filter

The effect of the invert filter is the inverse color effect

How to use:

The following is a reference fragment:

3.Xray Filter

The effect of the xray filter is to produce an X-ray effect

How to use:

The following is a reference fragment:

4.fliph and FLIPV

The function of the FLIPH filter is to produce a horizontal flip effect, and the FLIPV filter is to produce a vertical flip effect

How to use:

The following is a reference fragment:
or

5.alpha Filter

The Alpha filter acts primarily to handle the transparency of the picture.

How to use:

The following is a reference fragment:

Description: Value1 is a transparent value for the picture, the range is 0 (completely transparent) ~100 (completely opaque)

Value2 is the transparent value at the end of the picture transparency transformation, with a range of 0 (fully transparent) ~100 (completely opaque) Note: This value is valid only if VALUE3 is set

Value3 changes direction for picture transparency. When the value is 1 o'clock, the transparency of the picture is linearly changed from left to right; the value is 2 o'clock, the picture transparency changes from inside to outer radius; the value is 3 o'clock, figure

The transparency of the slice is rectangular from inside to outside.

Cases:

The following is a reference fragment:

6.shadow Filter

The effect of the shadow filter is to create a shadow effect

How to use:

The following is a reference fragment:

Description: value1 is the color value of the shadow, such as 000000 indicates black

value2 for light illumination angle, such as 135

Cases:

The following is a reference fragment:

7.wave Filter

The Wave filter works by distorting the picture

How to use:

The following is a reference fragment:

Note: The value of the value1 is 1 o'clock, add the original picture to the processed picture; for 0 o'clock, no increase

Value2 for the number of visually distorted waves

Value3 is the waveform brightness percentage, the range is 0~100

Value4 is the initial amount of the sine wave offset, the value range is 0~100

Value5 is the intensity of waveform effect

Cases:

The following is a reference fragment:

Here's a simple example of this: there is an almost transparent image on the page, and when the mouse moves to the image, the image becomes clearer; when the mouse

When the label is moved, the image is restored to its original transparent state.

To do this, you need to use the Alpha filter to the CSS, and JavaScript to control the opacity value of the alpha filter, insert a picture in the first page, and set Alpha

The opacity value of the filter, so that the picture is transparent, the picture code is:

The following is a reference fragment:

      JavaScript code is as follows:
The following is a reference fragment:
<script language= "JavaScript" > 
Function ch (n)  
{ 
if (n== "add")///If the incoming argument is add, increase the opacity of the picture  
if ( me.filters.alpha.opacity<100)  
{ 
Me.filters.alpha.opacity=me.filters.alpha.opacity+5;