css| filters Sometimes, we need to add some special effects to the images in the Web page, such as transparency, distortion, shadow, or flip, we generally 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 effect is as shown in the figure
2.Invert Filter
The effect of the invert filter is the inverse color effect
How to use:
The effect is as shown in the figure
3.Xray Filter
The effect of the xray filter is to produce an X-ray effect
How to use:
The effect is as shown in the figure
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: or
The effect is as shown in the figure
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:
The effect is as shown in the figure
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:
The effect is as shown in the figure
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:
The effect is as shown in the figure
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: <IMG Src= "Http://www.webjx.com/htmldata/2005-03-10/a.gif" id= "Me" style= "Filter:alpha (opacity=20)" ".
The JavaScript code is as follows:
<script language= "JavaScript" >
function ch (n)
{
if (n== "add")///If the incoming argument is add, the opacity of the picture is increased
if (me.filters.alpha.opacity<100)
{
me.filters.alpha.opacity=me.filters.alpha.opacity+5;
SetTimeout ("ch (' Add ')", 10);
}
if (n== "Dec")///If the incoming parameter is DEC, the opacity of the picture is lowered
if (me.filters.alpha.opacity>20)
{
me.filters.alpha.opacity=me.filters.alpha.opacity-5;
SetTimeout ("ch (' ADC ')", 10);
}
}
</script>
Add the above code to
