实例

修改所有图片的颜色为黑白 (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的更多相关文章

  1. 巧用 CSS3 filter(滤镜) 属性

    原文链接:CSS3 filter(滤镜) 属性 效果预览 filter: grayscale(100%); 定义和使用 filter 属性定义了元素(通常是<img>)的可视效果(例如:模 ...

  2. CSS3 filter(滤镜) 属性

    filter 属性定义了元素(通常是<img>)的可视效果 语法: object.style.WebkitFilter="grayscale(100%)" 小栗子: 修 ...

  3. css3中强大的filter(滤镜)属性

    CSS3中强大的filter(滤镜)属性 博主最近在做网站的过程中发现了一个非常强大的CSS3属性,就是filter(滤镜)属性,喜欢p图的朋友看名字都应该知道这是什么神器了吧.当然,这个属性的效果肯 ...

  4. 关于CSS3的filter(滤镜) 属性

    修改所有图片或者元素的颜色为黑白 (100% 灰度) DOM{ -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: ...

  5. filter(滤镜) 属性 内部资料 请勿转载 谢谢合作

    Filter 描述 none 默认值,没有效果. blur(px) 给图像设置高斯模糊."radius"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊 ...

  6. CSS3 filter(滤镜)

    filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度). Filter 函数 注意: 滤镜通常使用百分比 (如:75%), 当然也可以使用小数来表示 (如:0.7 ...

  7. CSS3 filter滤镜

    其默认值是none,他不具备继承性,其中filter-function一个具有以下值可选: grayscale灰度 sepia褐色(求专业指点翻译) saturate饱和度 hue-rotate色相旋 ...

  8. filter: grayscale(100%)滤镜属性

    效果图: filter滤镜属性

  9. CSS3的滤镜filter属性

    css3的滤镜filter属性,可以对网页中的图片进行类似Photoshop图片处理的效果,例如背景的毛玻璃效果.老照片(黑白照片).火焰效果等. 一.blur(px)高斯模糊 二.brightnes ...

随机推荐

  1. Cordova 系列之Mac OS 环境配置

    1.从AppStore 安装xcode 2.安装node.js环境 http://nodejs.org/ 3.使用命令行安装 cordova 命令行帮助:http://cordova.apache.o ...

  2. echarts相关属性设置(3)环状图

    option = { grid: { left: '3%', top: '0%', // height: 500, right: '30%', containLabel: true, }, legen ...

  3. bzoj1660:[Usaco2006 Nov]badhair乱头发节

    Description 农民John的某 N 头奶牛 (1 <= N <= 80,000) 正在过乱头发节!由于每头牛都 意识到自己凌乱不堪的发型, FJ 希望统计出能够看到其他牛的头发的 ...

  4. sessionStorage 、localStorage

    localStorage和sessionStorage使用时使用相同的API: localStorage.setItem("key","value");//以“ ...

  5. js字符串与正则匹配

    这里就说一下具体的使用方法,不做过多的解释. 字符串匹配正则的方法:str.方法(reg) 1.str.search() 参数是正则,将会从开始查找字符串中与正则匹配的字符,并返回该字符的第一次出现的 ...

  6. Web之localStorage

    localStorage: 1.localStorage拓展了cookie的4K限制 2.localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库 ...

  7. HTML图像标记

    1.使用方法 <img src="路径/文件名.图片格式" width="属性值" height="属性值" border=" ...

  8. py3.5 telnet的实例(在远程机器上批量创建用户)

    import sysimport telnetlibimport time HOST = ["172.18.217.12","172.18.217.13"]#往 ...

  9. 119 Pascal's Triangle II 帕斯卡三角形 II Pascal's Triangle II

    给定一个索引 k,返回帕斯卡三角形(杨辉三角)的第 k 行.例如,给定 k = 3,则返回 [1, 3, 3, 1].注:你可以优化你的算法到 O(k) 的空间复杂度吗?详见:https://leet ...

  10. jquery测试解析

    1.下列获取元素范围大小顺序错误的是 (选择一项) 1 A: B: C: D: 本题选择D 解析: 获取元素范围大小顺序依次为: $(#one).siblings("div")&g ...