Home > Developer > Web Develop
Again, introduce the syntax of filters: Filters syntax is very simple, for example:
| Elm {Filter:none | <filter-function > [<filter-function>]*} |
Its default value is None and has no inheritance. Where Filter-function has the following optional values:
1, Grayscale Grayscale
2, Sepia brown
3. Saturation of saturate
4, Hue-rotate hue rotation
5, invert anti-color
6. Opacity Transparency
7, Brightness brightness
8. Contrast contrast ratio
9, Blur Fuzzy
10. Drop-shadow Shadow
Finally, talk about the compatibility of filters in the browser:
There are few browsers that support this property now, only WebKit support, and only WebKit nightly version and Chrome 18.0. More than 976 versions are supported, so if you want to see the effect you need to download one of these two versions.
Let's take a look at the implementation of these effects, first in the page should have a picture:
The image is named "normal", indicating that the graph does not have any "filter" effect, and then in the process of implementation of the effect, we change its class name to the corresponding effect name.
First, grayscale grayscaleWith this special effect, the image will be grayed out, meaning that your image would have only two colors-"black" and "white".
| . Grayscale{-webkit-filter:grayscale (1);} |
Default value: 100%.
If you do not have any parameter values in grayscale (), the default will be rendered as "100%". The effect is as follows:
Second, sepiaSepia is translated into "Brown", using this special effect, will make your picture retro into black and white photos.
| . Sepia{-webkit-filter:sepia (1);} |
Default value: 100%.
If you do not have any parameter values in sepia (), the default will be "100%" rendering, as shown in the following:
Third, the saturation of saturateThe function of Saturat is to change the saturation of the image.
| . Saturate{-webkit-filter:saturate (0.5);} |
Default value: 100%.
If we change its value to 300%, the effect will be as shown:
| . saturate{-webkit-filter:saturate (3);} |
The role of hue-rotate is used to change the hue of a picture.
| . Hue-rotate{-webkit-filter:hue-rotate (90deg);} |
Default value: 0deg.
Five, invert anti-colorThe effect of the invert is like the effect of the bottom surface of our camera.
| . Invert{-webkit-filter:invert (1);} |
Default value: 100%.
Vi. transparency of opacityOpacity's role is to change the transparency of the image.
| . opacity{-webkit-filter:opacity (. 2);} |
Default value: 100%.
Seven, brightness brightnessThe effect of brightness is to change the brightness of the picture.
| . brightness{-webkit-filter:brightness (. 5);} |
Default value: 100%.
Eight, contrast contrast ratioThe role of contrast is to change the contrast of the picture, to learn about Photoshop, should know.
| . Contrast{-webkit-filter:contrast (2);} |
Default value: 100%.
Nine, Blur FuzzyBlurt's role is to change the clarity of the image.
| . Blur{-webkit-filter:blur (3px);} |
Default value: 0.
X. The shadow of Drop-shadowThe effect of Drop-shadow is similar to that of Box-shadow, which is the effect of shading a picture.
| . Drop-shadow{-webkit-filter:drop-shadow (5px 5px 5px #ccc);} |
The above list is the 10 effects that CSS3 filter can achieve, of course, if you need to set the desired effect.
For example:
| . Custom{-webkit-filter:saturate (5) hue-rotate (500deg) grayscale (0.3) sepia (0.7) Contrast (1.5) invert (0.2) brightness (. 9);} |
============== my test =========================.
<!doctype html>
<meta charset= "Utf-8" >
<title> Picture Effects </title>
<style type= "Text/css" >
. tu:hover{
-webkit-filter:brightness (120%);
}
</style>
<body>
</body>
====================================================
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
