css3 filter url,CSS3 filter(滤镜) 属性

CSS3 filter(滤镜) 属性

实例

修改所有图片的颜色为黑白 (100% 灰度):

img {

-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */

filter: grayscale(100%);

}

定义和使用

filter 属性定义了元素(通常是

)的可视效果(例如：模糊与饱和度)。

默认值:

none

继承:

no

动画支持:

是。详细可查阅 CSS 动画

版本:

CSS3

JavaScript 语法:

object.style.WebkitFilter="grayscale(100%)"

尝试一下 »

浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号。

紧跟在数字后面的 -webkit- 为指定浏览器的前缀。

属性

filter

18.0 -webkit-

不支持

35.0

6.0 -webkit-

15.0 -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)。

Filter 描述

none 默认值，没有效果。

blur(px) 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值