Learn how to apply a CSS filter to a picture in a Web page

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:

2.Invert Filter

The effect of the invert filter is the inverse color effect

How to use:

3.Xray Filter

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

How to use:

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:

Next, we'll introduce a few more complex filters:

5.alpha Filter

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

How to use:

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 picture transparency changes linearly from left to right; the value is 2 o'clock, the picture transparency changes from inside to outside radius; The value is 3 o'clock, and the transparency of the picture is rectangular from inside to out.

Example:

6.shadow Filter

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

How to use:

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

value2 for light illumination angle, such as 135

Example:

7.wave Filter

The Wave filter works by distorting the picture

How to use:

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

Example:

Here's a simple example of this: there is an almost transparent image on the page, and when the mouse moves over the image, the image becomes clearer, and the image is restored to its original transparent state when the mouse is moved.

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

The JavaScript code is as follows:

Add the above code to , then add onmouseover and onmouseout action to the picture, that is,

OK, about the CSS filter we introduced here, I believe you start the brain, will make better results.