1. Definition
Filter, which is literally a filter, the official Definition Filter property defines the visual effects of elements (usually ), such as Blur and saturation; for a chestnut:
<style> img{/* Grayscale 100%*/ -webkit-filter:grayscale (100%); } </style>
See this effect, Bo Friends are all beginning to start interested in filter?
2. Grammar
Filter:none | Blur () | Brightness () | Contrast () | Drop-shadow () | Grayscale () | Hue-rotate () | Invert () | Opacity () | Saturate () | Sepia () | URL ();
As you can see, the properties have a lot of optional values, what do they mean?
Grayscale Grayscale
Sepia Brown (kind of retro old photo feeling)
Saturation of saturate
Hue-rotate Hue Rotation
Invert inverse color
Opacity transparency
Brightness brightness
Contrast contrast ratio
Blur Blur
Drop-shadow Shadow
Give me a chestnut:
Here, adjust with sepia.
Example Picture:
3. Example
Below, for some of the values of the Filter property to do an example, other fun things need to explore together with friends, what fun to share with me yo
(1) hue-rotate (color rotation)
Look at the effect of the picture bar, the specific use of the effect depends on everyone to explore:
<style> . img{ -webkit-filter:hue-rotate (330deg); } </style>：
(2) blur (fuzzy)
Blur (Blur effect, Unit px)
<style> . img{ -webkit-filter:blur (1px); } </style> <body> </body>Example Picture:
(3) Invert anti-color
Invert anti-color will be the picture into a negative feeling, more useless, look at the code:
<style> . img{ -webkit-filter:invert (100%); } </style><body> </body>Example Picture:
You guys think it's fun? Give it a try.
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
