<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <img class="normal" src="fx.jpg" alt=""> <img src="fx.jpg" alt="" class="filter1"> <img src="fx.jpg" alt="" class="sepia"> <img src="fx.jpg" alt="" class="saturate"> <img src="fx.jpg" alt="" class="saturate300"> <img src="fx.jpg" alt="" class="invert"> <img src="fx.jpg" alt="" class="opacity"> <img src="fx.jpg" alt="" class="brightness"> <img src="fx.jpg" alt="" class="contrast"> <img src="fx.jpg" alt="" class="blur"> <img src="fx.jpg" alt="" class="drop-shadow"> </body> </html>
img { max-width: 200px; } .filter1 { -webkit-filter: grayscale(1); } .sepia { -webkit-filter: sepia(1); } .saturate { -webkit-filter: saturate(0.5); } .saturate300 { -webkit-filter: saturate(3); } .invert { -webkit-filter: invert(1); } .opacity { -webkit-filter: opacity(.2); } .brightness { -webkit-filter: brightness(.5); } .contrast { -webkit-filter: contrast(2); } .blur { -webkit-filter: blur(3px); } .drop-shadow { -webkit-filter: drop-shadow(5px 5px 5px #ccc); }
解释：
filter的一些属性目前只有webkit支持
filter: grayscale(1) 灰度
sepia 褐色
saturate 饱和度
hue-rotate 色相旋转
invert 反色
opacity 透明度
brightness 亮度
contrast 对比度
blur 模糊
drop-shadow 阴影
效果：
模糊：
filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */ -webkit-filter: blur(10px); /* Chrome, Opera */ -moz-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */
iOS下：
-webkit-backdrop-filter
解释：
和filter属性值一样