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 ...
随机推荐
- 转 载python数据分析(1)-numpy产生随机数
转自:http://blog.csdn.net/jinxiaonian11/article/details/53143141 在数据分析中,数据的获取是第一步,numpy.random 模块提供了非常 ...
- 用ssh-key-gen 在本地主机上创建公钥和密钥
用ssh-key-gen 在本地主机上创建公钥和密钥 ligh@local-host$ ssh-keygen -t rsa
- Redis 数据导入导出,redis-dump命令
安装redis-dump 工具 yum install ruby rubygems ruby-devel# 修改为国内源gem sources --add http://gems.ruby-china ...
- Fabric 简单使用
Fabric 简单使用 最近公司组织压测系统,要在多台机子上部署代码,可是机子上的代码与生产环境不一样,需要修改代码,还有有问题的地方要修改,然后再发代码.这边一共有7台服务务器,重新发代码,要一台一 ...
- 状态模式和php实现
状态模式: 允许一个对象在其内部状态改变时改变它的行为,对象看起来似乎修改了它的类.其别名为状态对象(Objects for States),状态模式是一种对象行为型模式. 模式分析: 在很多情况下, ...
- KMP字符串模式匹配详解
KMP字符串模式匹配详解 http://www.cppblog.com/oosky/archive/2006/07/06/9486.html
- Jenkins在Windows上部署
下载解压安装即可.(注意:不要安装在系统盘) 下载地址:http://mirrors.jenkins-ci.org/war-stable/(官方镜像地址) 去相应目录复制管理员密码粘贴到输入框 选择安 ...
- 闹心的CSDN
近来搜索技术文章时,每次来到csdn上时,显示全文就提示登陆. 唉登陆就登陆吧,记不清账号了,就用手机号获取验证码.然后更改密码.我靠,密码居然要8位以上,要有大小写字母.数字和标点符号的组合... ...
- java文件读写链接流向
1)字节流 读写的链接流向源节点->FileInputStream->BufferedInputStream->ObjectInputStream->程序 程序->Obj ...
- Flask信号流程
首先先我们来看看Flask里面的信号是什么样的,我们可以找到一个叫signals.py的文件 这里面是所有定义了的后面请求流程中会用到的信号 二.哪些地方用到了信号 1.请求app上下文时执行的,在执 ...