例
将所有图像，以黑色和白色的颜色(100% gray) ：
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari,
Opera */
filter: grayscale(100%);
}
Original image
grayscale(100%)
提示：更多的"Try it Yourself"下面的例子。
定义和用法
该过滤器属性定义的视觉效果(like blur and saturation)到一个元素(often <img>)
| 默认值： | 没有 |
|---|---|
| 遗传： | no |
| 动画： | yes. Read about animatable |
| 版： | CSS3 |
| JavaScript语法： | object .style.WebkitFilter="grayscale(100%)" Try it |
浏览器支持
在表中的数字规定，完全支持该属性的第一个浏览器版本。
数字后面-webkit-指定用一个前缀工作的第一个版本。
| 属性 | |||||
|---|---|---|---|---|---|
| filter | 18.0 -webkit- | 13.0 | 35.0 | 9.1 6.0 -webkit- | 15.0 -webkit- |
注：Internet Explorer的旧版本(4.0 to 8.0)的支持非标准"filter"已被弃用财产。 这是主要用于不透明需要支持时，从IE8和向下。
CSS语法
filter:
none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate()
| invert() | opacity() | saturate() | sepia() | url();提示：要使用多个过滤器，每个滤波器用空格分隔(See "More Examples" below)
过滤功能
注意：使用百分比值滤波器(ie 75%)也接受该值作为小数(ie 0.75)
| 过滤 | 描述 | 播放 |
|---|---|---|
| none | 默认值。 指定无影响 | 播放 ” |
| blur( px ) | 应用模糊效果的图像。 较大的值会产生更多的模糊。 如果没有指定值，则使用0。 | 播放 ” |
| brightness( % ) | 调整图像的亮度。 0％将使图像全黑。 100％ (1)是默认的，表示原始图像。 超过100％的值将提供更亮的结果。 | 播放 ” |
| contrast( % ) | 调整图像的对比度。 0％将使图像全黑。 100％ (1)是默认的，表示原始图像。 超过100％的值将提供的结果与较少的对比。 | 播放 ” |
| drop-shadow( h-shadow v-shadow blur spread color ) | 适用阴影效果的图像。 可能的值： H-阴影 -必需。 指定水平阴影的像素值。 负值阴影放置在图像的左侧。 V-阴影 -必需。 指定垂直阴影的像素值。 负值放置图像上方的阴影。 模糊 -可选。 这是第三个价值，而且必须以像素为单位。 添加一个模糊效果的阴影。 较大的值会产生更多的模糊（阴影变得更大，更轻）。 负值是不允许的。 如果没有指定值，默认值为0（阴影的边缘锐利）。 传播 -可选。 这是第四个值，并且必须在像素。 正值将使阴影扩展和增长更大，负值将使阴影收缩。 如果未指定，这将是0 (the shadow will be the same size as the element) 。 注：浏览器，Safari和Opera，也许其他的浏览器不支持此4的长度; 如果添加的话也不会呈现。 颜色 -可选。 增加了一个颜色的影子。 如果未指定，则颜色取决于浏览器(often black) 。 创造一个红影，其水平和垂直方向为8像素大，与10px的的模糊效果的例子： 过滤器：下拉阴影（8像素8像素10px的红色）; 提示：该过滤器类似于箱阴影财产。 | 播放 ” |
| grayscale( % ) | 转换为灰度图像。 0％ (0)是默认的，表示原始图像。 100％将会使图像完全灰化(used for black and white images) 。 注意：负值是不允许的。 | 播放 ” |
| hue-rotate( deg ) | 应用于所述图像上的色调旋转。 该值定义沿色环图像样本将被调整的度数。 0deg是默认值，表示原始图像。 注：最大值为360deg。 | 播放 ” |
| invert( % ) | 反转图像中的样本。 0％ (0)是默认的，表示原始图像。 100％将使图像完全反转。 注意：负值是不允许的。 | 播放 ” |
| opacity( % ) | 设置图像的透明度级别。 不透明度级别描述的透明度级，其中： 0％是完全透明的。 100％ (1)是默认的，表示在原始图像(no transparency) 。 注意：负值是不允许的。 提示：该过滤器类似于不透明财产。 | 播放 ” |
| saturate( % ) | 饱和的图像。 0％ (0)将使图像完全不饱和的。 100％是默认和表示原始图像。 超过100％的值提供超饱和的结果。 注意：负值是不允许的。 | 播放 ” |
| sepia( % ) | 将图像转换为棕褐色。 0％ (0)是默认的，表示原始图像。 100％将使图像完全棕褐色。 注意：负值是不允许的。 | 播放 ” |
| url() | 的url()函数采用指定的SVG滤波器的XML文件的位置，并且可包括一个锚固到一个特定的过滤器元件。 例： 过滤： url(svg-url#element-id) | |
| initial | 将此属性设置为默认值。 阅读关于初始 | |
| inherit | 继承其父元素此属性。 阅读关于继承 |
更多示例
模糊示例
应用模糊效果的图像：
img {
-webkit-filter: blur(5px); /* Chrome, Safari,
Opera */
filter: blur(5px);
}
Original image
blur(5px)
亮度示例
调整图像的亮度：
img {
-webkit-filter: brightness(200%); /* Chrome, Safari,
Opera */
filter: brightness(200%);
}
Original image
brightness(200%)
对比实例
调节图像的对比度：
img {
-webkit-filter: contrast(200%); /* Chrome, Safari,
Opera */
filter: contrast(200%);
}
Original image
contrast(200%)
阴影示例
套用阴影效果的图像：
img {
-webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari,
Opera */
filter: drop-shadow(8px 8px 10px red);
}
Original image
drop-shadow(8px 8px 10px red)
灰度示例
将图像转换为灰度：
img {
-webkit-filter: grayscale(50%); /* Chrome, Safari,
Opera */
filter: grayscale(50%);
}
Original image
grayscale(50%)
色相旋转示例
应用该图像上的色调旋转：
img {
-webkit-filter: hue-rotate(90deg); /* Chrome, Safari,
Opera */
filter: hue-rotate(90deg);
}
Original image
hue-rotate(90deg)
反例
反转图像中的样本：
img {
-webkit-filter: invert(100%); /* Chrome, Safari,
Opera */
filter: invert(100%);
}
Original image
invert(100%)
透明度示例
设置图像的不透明度级别：
img {
-webkit-filter: opacity(30%); /* Chrome, Safari,
Opera */
filter: opacity(30%);
}
Original image
opacity(30%)
饱和例
饱和图像：
img {
-webkit-filter: saturate(800%); /* Chrome, Safari,
Opera */
filter: saturate(800%);
}
Original image
saturate(800%)
棕褐色例
将图像转换为棕褐色：
img {
-webkit-filter: sepia(100%); /* Chrome, Safari,
Opera */
filter: sepia(100%);
}
Original image
sepia(100%)
合并过滤器/多个过滤器
要使用多个过滤器，每个滤波器用空格分隔。
注：顺序很重要(ie using grayscale()后， sepia()将导致一个完全灰度图像）。
img {
-webkit-filter: contrast(200%) brightness(150%); /* Chrome, Safari,
Opera */
filter: contrast(200%) brightness(150%);
}
Original image
contrast(200%) brightness(150%)
所有筛选
所有滤镜功能演示：
.blur {
-webkit-filter: blur(4px);
filter: blur(4px);
}
.brightness {
-webkit-filter:
brightness(0.30);
filter: brightness(0.30);
}
.contrast {
-webkit-filter:
contrast(180%);
filter: contrast(180%);
}
.grayscale {
-webkit-filter:
grayscale(100%);
filter: grayscale(100%);
}
.huerotate {
-webkit-filter:
hue-rotate(180deg);
filter: hue-rotate(180deg);
}
.invert {
-webkit-filter:
invert(100%);
filter: invert(100%);
}
.opacity {
-webkit-filter:
opacity(50%);
filter: opacity(50%);
}
.saturate {
-webkit-filter:
saturate(7);
filter: saturate(7);
}
.sepia {
-webkit-filter:
sepia(100%);
filter: sepia(100%);
}
.shadow {
-webkit-filter:
drop-shadow(8px 8px 10px green);
filter: drop-shadow(8px 8px 10px green);
} 试一试» 相关页面
HTML DOM参考： filter property