首页 > 代码库 > 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
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。