实例

修改所有图片的颜色为黑白 (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. 绘制复杂的原理图元件库用于cadence(二)

    绘制Xilinx XC7K325TFFG900 kintex-7 FPGA元件 1.在官网搜索“pin out”往下拉一下就能看见 2.点击进入选择相应型号 3.打开之后是类似txt格式的FFG900 ...

  2. 当获取相似数据时,使用不同方法调用不同sp,但是使用同一个方法去用IIDataReader或者SqlDataReader读取数据时需要判断column name是否存在。

    /// <summary> /// Checks clumn Name /// </summary> /// <param name="reader" ...

  3. kafka系列二:多节点分布式集群搭建

    上一篇分享了单节点伪分布式集群搭建方法,本篇来分享一下多节点分布式集群搭建方法.多节点分布式集群结构如下图所示: 为了方便查阅,本篇将和上一篇一样从零开始一步一步进行集群搭建. 一.安装Jdk 具体安 ...

  4. AJPFX分享java排序之希尔排序

    (1)基本思想:算法先将要排序的一组数按某个增量d(n/2,n为要排序数的个数)分成若干组,每组中记录的下标相差d.对每组中全部元素进行直接插入排序,然后再用一个较小的增量(d/2)对它进行分组,在每 ...

  5. hihocoder1776 序列

    思路: 考虑从左至右依次向每个位置放置数字,对于第i个位置,以i为结尾的i个前缀和模P是不能相等的(因为不存在和为P的倍数的子串),所以第i个位置只能放置P - i个不同的数字.则答案就是(P - 1 ...

  6. 初识react中的状态量

    react组件中的两类状态数据:props,state,官网API给出的使用规范,多读几遍,受益匪浅: 结论: 1. 对应任何可变的数据,理应只有一个单一“ 数据源 ” 2. 如果多个组件均需要这些数 ...

  7. node.js0-5初级者

    伴着<妈是心中的茉莉花> 这里,我用的sublime记事本,所以用的运行方法是终端.(后来发现git 可以省去cd切换目录). 安装node.js  官网说的很清楚. 这里我们可以在js文 ...

  8. 关于软件测试(5):初识Peer Review

    一.背景:这周的软件测试课堂上我们在自行分组的情况下,对姚同学的汽车停车位定位管理系统进行了Peer Review,中文就是同行测试.这也是我第一次接触同行测试,那接下来我先介绍一下Peer Revi ...

  9. CSS-学习笔记四

    1.*用于匹配任何的标记 2.>用于指定父子节点关系 3.E+F毗邻元素选择器,匹配所以紧随E元素之后的同级元素F 4.E~F匹配所以E元素之后的同级元素F 5.名称[表达式] [att=val ...

  10. UVA 10572 Black & White (状压DP)

    题意:有一个n*m的矩阵,其中部分格子已经涂黑,部分涂白,要求为其他格子也上黑/白色,问有多少种涂法可以满足一下要求: (1)任意2*2的子矩阵不可以同色. (2)所有格子必须上色. (3)只能有两个 ...