首页 > 代码库 > CSS filter

CSS filter

语法

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

技术分享

 

参考:CSS3 filter(滤镜) 属性

 

实例:

img{    float: left;    width: 200px;    height: 200px;    margin: 5px;}/*高斯模糊*/img:nth-of-type(2){    filter: blur(5px);}/*曝光度*/img:nth-of-type(3){    filter: brightness(200%);}/*对比度*/img:nth-of-type(4){    filter: contrast(200%);}/*灰度*/img:nth-of-type(5){    filter: grayscale(100%);}/*色相旋转*/img:nth-of-type(6){    filter: hue-rotate(180deg);}/*反相*/img:nth-of-type(7){    filter: invert(100%);}/*透明程度*/img:nth-of-type(8){    filter: opacity(50%);}/*图像饱和度*/img:nth-of-type(9){    filter: saturate(800%);}/*将图像转换为深褐色*/img:nth-of-type(10){    filter: sepia(100%);}/*添加阴影*/img:nth-of-type(11){    filter: drop-shadow(5px 5px 5px red);}/*多个滤镜*/img:nth-of-type(12){    filter: saturate(800%) blur(10px);}

技术分享

 

 

兼容

属性名前面要加内核。

CSS filter