css的filter全属性图文介绍

CSS的filter属性用于应用图像的可视效果，如模糊或者饱和度调整。filter属性的全部属性值如下：

none：定义无效果
blur(px)：定义模糊效果
\`brightness(%)：定义亮度效果
\`contrast(%)：定义对比度效果
drop-shadow()：定义阴影效果
\`grayscale(%)：定义灰度级效果
hue-rotate(deg)：定义色调旋转效果
\`invert(%)：定义反色效果
\`opacity(%)：定义透明度效果
\`saturate(%)：定义饱和度效果
\`sepia(%)：定义深褐色效果

实例代码：




<!DOCTYPE html>
<html>
<head>
<style>
/* 应用模糊效果 */
.blur {
  filter: blur(5px);
}
 
/* 应用亮度效果 */
.bright {
  filter: brightness(50%);
}
 
/* 应用对比度效果 */
.contrast {
  filter: contrast(200%);
}
 
/* 应用阴影效果 */
.shadow {
  filter: drop-shadow(16px 16px 20px red);
}
 
/* 应用灰度效果 */
.gray {
  filter: grayscale(100%);
}
 
/* 应用色调旋转效果 */
.hue {
  filter: hue-rotate(90deg);
}
 
/* 应用反色效果 */
.invert {
  filter: invert(100%);
}
 
/* 应用透明度效果 */
.opacity {
  filter: opacity(50%);
}
 
/* 应用饱和度效果 */
.saturate {
  filter: saturate(300%);
}
 
/* 应用深褐色效果 */
.sepia {
  filter: sepia(60%);
}
</style>
</head>
<body>
 
<img src="image.jpg" alt="原始图片">
<img class="blur" src="image.jpg" alt="模糊效果">
<img class="bright" src="image.jpg" alt="亮度效果">
<img class="contrast" src="image.jpg" alt="对比度效果">
<img class="shadow" src="image.jpg" alt="阴影效果">
<img class="gray" src="image.jpg" alt="灰度效果">
<img class="hue" src="image.jpg" alt="色调旋转效果">
<img class="invert" src="image.jpg" alt="反色效果">
<img class="opacity" src="image.jpg" alt="透明度效果">
<img class="saturate" src="image.jpg" alt="饱和度效果">
<img class="sepia" src="image.jpg" alt="深褐色效果">
 
</body>
</html>

在这个例子中，我们有一个原始的图片，然后应用了各种filter效果。每个类都是一个效果，你可以打开浏览器查看效果。

css的filter全属性图文介绍

评论已关闭

推荐阅读