网站建设的CSS3 滤镜属性

定义和使用

filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。

实例

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

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

}

CSS 语法

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

提示: 使用空格分隔多个滤镜。

Filter 函数

注意: 滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。

filter: url(svg-url#element-id)

模糊实例

图片使用高斯模糊效果：

img {
-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
filter: blur(5px);

}

Invert 函数实例

反转输入图像:

img {
-webkit-filter: invert(100%); /* Chrome, Safari, Opera */
filter: invert(100%);
}

Saturate 函数实例

转换图像饱和度:

img {
-webkit-filter: saturate(800%); /* Chrome, Safari, Opera */
filter: saturate(800%);
}

复合函数

使用多个滤镜，每个滤镜使用空格分隔。

注意: 顺序是非常重要的 (例如使用 grayscale() 后再使用 sepia()将产生一个完整的灰度图片)。

img {
-webkit-filter: contrast(200%) brightness(150%); /* Chrome, Safari, Opera */
filter: contrast(200%) brightness(150%);
}

<span microsoft="" yahei";"="" font-size:16px;"="" style="font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; color: inherit;">所有滤镜实例

以下实例演示了所有滤镜的使用方法:

.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);

}

扫一扫，免费获取一份网站建设报价