css3 filter(滤镜)属性汇总与使用介绍,来源W3C
实例
修改所有图片的颜色为黑白 (100% 灰度):
img {
-webkit-filter: grayscale(%); /* Chrome, Safari, Opera */
filter: grayscale(%);
}
定义和使用
filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度)。
浏览器支持
表格中的数字表示支持该方法的第一个浏览器的版本号。
紧跟在数字后面的 -webkit- 为指定浏览器的前缀。
注意: 旧版 Internet Explorer 浏览器(4.0 to 8.0) 支持的非标准 "filter" 属性已被废弃。 IE8 及更低版本浏览器通常使用 opacity 属性。
CSS 语法
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
提示: 使用空格分隔多个滤镜。
Filter 函数
注意: 滤镜通常使用百分比 (如:75%), 当然也可以使用小数来表示 (如:0.75)。
模糊实例
图片使用高斯模糊效果:
img {
-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
filter: blur(5px);
}
Brightness 函数实例
使图片变亮:
img {
-webkit-filter: brightness(%); /* Chrome, Safari, Opera */
filter: brightness(%);
}
Contrast 函数实例
调整图像的对比度:
img {
-webkit-filter: contrast(%); /* Chrome, Safari, Opera */
filter: contrast(%);
}
drop-shadow 函数实例
给图像设置一个阴影效果:
img {
-webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
filter: drop-shadow(8px 8px 10px red);
}
Grayscale 函数实例
将图像转换为灰度图像:
img {
-webkit-filter: grayscale(%); /* Chrome, Safari, Opera */
filter: grayscale(%);
}
hue-rotate() 函数实例
给图像应用色相旋转:
img {
-webkit-filter: hue-rotate(90deg); /* Chrome, Safari, Opera */
filter: hue-rotate(90deg);
}
Invert 函数实例
反转输入图像:
img {
-webkit-filter: invert(%); /* Chrome, Safari, Opera */
filter: invert(%);
}
Opacity 函数实例
转化图像的透明程度:
img {
-webkit-filter: opacity(%); /* Chrome, Safari, Opera */
filter: opacity(%);
}
Saturate 函数实例
转换图像饱和度:
img {
-webkit-filter: saturate(%); /* Chrome, Safari, Opera */
filter: saturate(%);
}
Sepia 函数实例
将图像转换为深褐色:
img {
-webkit-filter: sepia(%); /* Chrome, Safari, Opera */
filter: sepia(%);
}
复合函数
使用多个滤镜,每个滤镜使用空格分隔。
注意: 顺序是非常重要的 (例如使用 grayscale() 后再使用 sepia()将产生一个完整的灰度图片)。
img {
-webkit-filter: contrast(%) brightness(%); /* Chrome, Safari, Opera */
filter: contrast(%) brightness(%);
}
所有滤镜实例
以下实例演示了所有滤镜的使用方法:
.blur {
-webkit-filter: blur(4px);
filter: blur(4px);
} .brightness {
-webkit-filter: brightness(0.30);
filter: brightness(0.30);
} .contrast {
-webkit-filter: contrast(%);
filter: contrast(%);
} .grayscale {
-webkit-filter: grayscale(%);
filter: grayscale(%);
} .huerotate {
-webkit-filter: hue-rotate(180deg);
filter: hue-rotate(180deg);
} .invert {
-webkit-filter: invert(%);
filter: invert(%);
} .opacity {
-webkit-filter: opacity(%);
filter: opacity(%);
} .saturate {
-webkit-filter: saturate();
filter: saturate();
} .sepia {
-webkit-filter: sepia(%);
filter: sepia(%);
} .shadow {
-webkit-filter: drop-shadow(8px 8px 10px green);
filter: drop-shadow(8px 8px 10px green);
}
链接:http://www.runoob.com/cssref/css3-pr-filter.html
链接:http://www.runoob.com/try/try.php?filename=trycss3_filter_all
css3 filter(滤镜)属性汇总与使用介绍,来源W3C的更多相关文章
- 巧用 CSS3 filter(滤镜) 属性
原文链接:CSS3 filter(滤镜) 属性 效果预览 filter: grayscale(100%); 定义和使用 filter 属性定义了元素(通常是<img>)的可视效果(例如:模 ...
- CSS3 filter(滤镜) 属性
filter 属性定义了元素(通常是<img>)的可视效果 语法: object.style.WebkitFilter="grayscale(100%)" 小栗子: 修 ...
- css3中强大的filter(滤镜)属性
CSS3中强大的filter(滤镜)属性 博主最近在做网站的过程中发现了一个非常强大的CSS3属性,就是filter(滤镜)属性,喜欢p图的朋友看名字都应该知道这是什么神器了吧.当然,这个属性的效果肯 ...
- 关于CSS3的filter(滤镜) 属性
修改所有图片或者元素的颜色为黑白 (100% 灰度) DOM{ -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: ...
- filter(滤镜) 属性 内部资料 请勿转载 谢谢合作
Filter 描述 none 默认值,没有效果. blur(px) 给图像设置高斯模糊."radius"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊 ...
- CSS3 filter(滤镜)
filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度). Filter 函数 注意: 滤镜通常使用百分比 (如:75%), 当然也可以使用小数来表示 (如:0.7 ...
- CSS3 filter滤镜
其默认值是none,他不具备继承性,其中filter-function一个具有以下值可选: grayscale灰度 sepia褐色(求专业指点翻译) saturate饱和度 hue-rotate色相旋 ...
- filter: grayscale(100%)滤镜属性
效果图: filter滤镜属性
- CSS3的滤镜filter属性
css3的滤镜filter属性,可以对网页中的图片进行类似Photoshop图片处理的效果,例如背景的毛玻璃效果.老照片(黑白照片).火焰效果等. 一.blur(px)高斯模糊 二.brightnes ...
随机推荐
- [软件工程基础]2017.11.01 第五次 Scrum 会议
具体事项 燃尽图 每人工作内容 成员 已完成的工作 计划完成的工作 工作中遇到的困难 游心 #8 掌握 Laravel 框架 #10 搭建可用的开发测试环境:#9 阅读分析 PhyLab 后端代码与文 ...
- 洛谷 P1954 [NOI2010]航空管制
https://www.luogu.org/problemnew/show/P1954 拓扑排序, 注意到如果正着建图("a出现早于b"=>"a向b连边" ...
- eclipse导入mavn工程报Failure to transfer org.apache.maven.plugins:maven-resources-plugin:pom:2.6 的解决办法
详细报错: Failure to transfer org.apache.maven.plugins:maven-resources-plugin:pom:2.6 from http://10.74. ...
- 在spring的过滤器中注入实体类(@autowire会失效可使用这个方法)
转载:难得可贵的好文章 https://blog.csdn.net/chl191623691/article/details/78657638 首先,本文 绝对是好文!不止本文,作者的文章都是很经 ...
- java.lang.IndexOutOfBoundsException: Index: 0, Size: 0
在往数据库添加数据需要判断数据库中是否已有记录,判断的返回结果通常是List.在List为空的情况下,调用其方法需要格外注意,例如:调用get()则会报下标越界的异常. 当然还可以联想到其他情况,当判 ...
- P1218 [USACO1.5]特殊的质数肋骨 Superprime Rib
题目描述 农民约翰的母牛总是产生最好的肋骨.你能通过农民约翰和美国农业部标记在每根肋骨上的数字认出它们.农民约翰确定他卖给买方的是真正的质数肋骨,是因为从右边开始切下肋骨,每次还剩下的肋骨上的数字都组 ...
- 简述UML类图
注:本文摘自刘伟老师的博客http://blog.csdn.net/lovelion/article/details/7838679,如有侵权,请联系本人! 1.类的UML图示 在UML中,类使用包含 ...
- Slacklining 2017/2/6
原文 Get ready for a different kind of challenge What happens when mountain climbers take a day off?Ap ...
- 如何解决源码安装软件中make时一直重复打印configure信息
在通过源码安装软件时,会出现执行./configure后再make时总是重复打印configure的信息,无法进入下一阶段的安装. 主要原因是系统当前的时间与实际时间不一致,特别是在虚拟机上经常会出现 ...
- js 判断是什么浏览器、是否为谷歌浏览器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http ...