The Filter property defines the visual effect of the element (usually ), the blur, saturation, grayscale, etc. of the case. Personal feeling is powerful1. Filter SyntaxFilter:none | Blur () | Brightness () | Contrast () | Drop-shadow () | Grayscale () | Hue-rotate () | Invert () | Opacity () | Saturate () | Sepia () | URL ();2, the main browser current time support situation (from can I use:http://caniuse.com/)
you can see ie8,9,10,11, OPera mini all, and Android Broswer4.3 are currently not supported3. Filter Functions1) Blur effect blur (px) function<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<style>
div{width:480px;height:300px;margin:100px Auto;}
div>img{
Filter:blur (1px);
-webkit-filter:blur (1px); /*chrome, Opera, safari*/
}
</style>
<body>
<div>
</div>
</body>
2) Make picture variable brightness (
%) function<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<style>
div{width:480px;height:300px;margin:100px Auto;}
div>img{
filter:brightness (150%);/* Brightness is 1.5 times times the original, or it can be 1.5,100% as the original */
-webkit-filter:brightness (150%);/*chrome, Opera, safari*/
}
</style>
<body>
<div>
</div>
</body>
4) Adjust image contrast ratio contrast (%) function<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<style>
div{width:480px;height:300px;margin:100px Auto;}
div>img{
Filter:contrast (200%);/* Contrast is twice times the original, can also write 2;100% as the original, can be more than 100%, set a lower resolution */
-webkit-filter:contrast (200%); /*chrome, Opera, safari*/
}
</style>
<body>
<div>
</div>
</body>
4) Shadow effect Drop-shadow (PX,PX,PX,PX)<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<style>
div{width:480px;height:300px;margin:100px Auto;}
div>img{
Filter:drop-shadow (8px 8px 6px red);
/* Note that spaces are separated instead of commas, and the first two attribute values represent pixels that are shifted to the right and down of the image, with no shadow offset in the actual application */
-webkit-filter:drop-shadow (8px 8px 6px red);/*chrome, Opera, safari*/
}
</style>
<body>
<div>
</div>
</body>
5) Convert image to grayscale image grayscale (%)<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<style>
div{width:480px;height:300px;margin:100px Auto;}
div>img{
Filter:grayscale (60%);/* Range is 0%~100%*/
-webkit-filter:grayscale (60%);/*chrome, Opera, safari*/
}
</style>
<body>
<div>
</div>
</body>
original (TOP) and (Bottom):
6) Hue rotation hue-rotate (deg)<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<style>
div{width:480px;height:300px;margin:100px Auto;}
div>img{
filter:hue-rotate (30deg);/* Hue rotation degree range of 0deg~360deg,0 degrees for the original, 360deg equivalent to turn around and back 0deg*/
-webkit-filter:hue-rotate (30deg);/*chrome, Opera, safari*/
}
</style>
<body>
<div>
</div>
</body>
original (TOP) and (Bottom):
7) Invert the input image<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<style>
div{width:480px;height:300px;margin:100px Auto;}
div>img{
Filter:invert (100%);/* attribute value between 0% and 100%, 100% is full inversion, 0% is not reversed */
-webkit-filter:invert (100%);/*chrome, Opera, safari*/
}
</style>
<body>
<div>
</div>
</body>
original (TOP) and (Bottom):
8) Change the transparency of the image<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<style>
div{width:480px;height:300px;margin:100px Auto;}
div>img{
filter:opacity (50%);/* Also can write 0.5,0% to express completely transparent, 100% is the original, completely opaque, value between 0~100% */
-webkit-filter:opacity (50%);/*chrome, Opera, safari*/
}
</style>
<body>
<div>
</div>
</body>
original (TOP) and (Bottom)
9) Saturation setting saturate (%)<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<style>
div{width:480px;height:300px;margin:100px Auto;}
div>img{
filter:saturate (500%);/*0%~100% can also be more than 100%, 0% is completely unsaturated, 100% is the original, more than 100% saturation is higher * *
-webkit-filter:saturate (500%);/*chrome, Opera, safari*/
}
</style>
<body>
<div>
</div>
</body>
original (TOP) and (Bottom)
10) Convert the image to sepia sepia (80%)<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<style>
div{width:480px;height:300px;margin:100px Auto;}
div>img{
Filter:sepia (80%);/* Value between 0%~100%, cannot exceed 100%,100% full sepia, 0% image unchanged */
-webkit-filter:sepia (80%);/*chrome, Opera, safari*/
}
</style>
<body>
<div>
</div>
</body>
One ) The URL function accepts an XML file that sets an SVG filter and can contain an anchor point to specify a specific filter element URL ()filter: URL(svg-URL#element-id) 12) The composite function uses multiple filters, each separated by a space.
Note: The order is very important (for example, using grayscale () and then using sepia () will result in a full grayscale image). <! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<style>
div{width:480px;height:300px;margin:100px Auto;}
div>img{
-webkit-filter:contrast (200%) brightness (150%);/* Chrome, Safari, Opera */
filter:contrast (200%) brightness (150%);
}
</style>
<body>
<div>
</div>
</body>
original (TOP) and (Bottom)
13) Otherinitial: Setting the property to the default valueinherit: Inherit this property from the parent elementthe author of this article is original, reproduced please indicate the source, thank you for your cooperation! The article will inevitably have shortcomings, if there is a mistake, thank you for your point, you can add comments or QQ messages.
CSS3 Filter (filter)--CSS3 technology
