html中filter属性,CSS filter 属性

更多实例

模糊实例

为图像添加模糊效果：

img {

filter: blur(5px);

}

模糊实例 2

应用模糊的背景图片：

img.background {

filter: blur(35px);

}

亮度实例

调整图像的亮度：

img {

filter: brightness(200%);

}

对比度实例

调整图像的对比度：

img {

filter: contrast(200%);

}

阴影实例

为图像应用阴影效果：

img {

filter: drop-shadow(8px 8px 10px gray);

}

灰阶实例

将图像转换为灰阶：

img {

filter: grayscale(50%);

}

色相旋转实例

在图像上应用色相旋转：

img {

filter: hue-rotate(90deg);

}

反转实例

反转图像中的样本：

img {

filter: invert(100%);

}

不透明度实例

设置图像的不透明度级别：

img {

filter: opacity(30%);

}

饱和度实例

调整图像的饱和度：

img {

filter: saturate(800%);

}

棕褐色实例

将图像转换为棕褐色：

img {

filter: sepia(100%);

}

使用多重滤镜

要使用多个滤镜，请用空格分隔每个滤镜。请注意，顺序很重要(例如在 sepia() 之后使用 grayscale() 将产生完全灰色的图像)：

img {

filter: contrast(200%) brightness(150%);

}

所有滤镜

演示所有滤镜函数：

.blur {

filter: blur(4px);

}

.brightness {

filter: brightness(0.30);

}

.contrast {

filter: contrast(180%);

}

.grayscale {

filter: grayscale(100%);

}

.huerotate {

filter: hue-rotate(180deg);

}

.invert {

filter: invert(100%);

}

.opacity {

filter: opacity(50%);

}

.saturate {

filter: saturate(7);

}

.sepia {

filter: sepia(100%);

}

.shadow {

filter: drop-shadow(8px 8px 10px green);

}