-webkit-filter

wyy2018
-webkit-filter

-webkit-filter：CSS滤镜属性。可以在元素呈现之前，为元素渲染提供效果。常用于图像、背景、边框的渲染。

语法：

ele{
-webkit-filter: none | blur(px) | brightness() | contrast() | grayscale() | hue-rotate(deg) | invert() | opacity() |
　　　　　　　　　　　　saturate() | sepia() | drop-shadow( radius )| url(); /chrome, safari, opera/
filter: none | blur(px) | brightness() | contrast() | grayscale() | hue-rotate(deg) | invert() | opacity() |
　　　　　　　　　　　　saturate() | sepia() | drop-shadow( radius )| url();
}
其默认值为none，不能继承，其JavaScript语法为：object.style.WebkitFilter = " ";

注：IE不支持filter。

可选值：

none，默认值，无效果。
blur(px)，高斯模糊。
brightness(%)，亮度。
contrast(%)，对比度。
grayscale(%)，灰度。
hue-rotate(%)，色相旋转。
invert(%)，反色。
opacity(%)，透明度。
saturate(%)，饱和度。
sepia(%)，褐色。
drop-shadow(radius)，阴影。
url()，URL函数接受一个XML文件，该文件设置了一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。
简单效果：

原图

◊ blur() 5px模糊程度

img{
-webkit-filter: blur(5px);
filter: blur(5px);
}

◊ brightness() 180%亮度

img{
-webkit-filter: brightness(180%);
filter: brightness(180%);
}

  ◊ contrast()  200%对比度

img{
-webkit-filter: contrast(200%);
filter: contrast(200%);
}

◊ grayscale() 100%灰度

img{
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}

◊ hue-rotate() 180deg 色相旋转

img{
-webkit-filter: hue-rotate(180deg);
filter: hue-rotate(180deg);
}

◊ invert() 100%反色

img{
-webkit-filter: invert(100%);
filter: invert(100%);
}

◊ opacity() 50%透明度

img{
-webkit-filter: opacity(50%);
filter: opacity(50%);
}

◊ saturate() 200%饱和度

img{
-webkit-filter: saturate(200%);
filter: saturate(200%);
}

◊ sepia() 100%褐色

img{
-webkit-filter: sepia(100%);
filter: sepia(100%);
}

◊ drop-shadow() 阴影

img{
-webkit-filter: drop-shadow(10px 10px 15px green);
filter: drop-shadow(10px 10px 15px green);
}

猜你喜欢