filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
1 grayscale灰度
2 sepia褐色(有种复古的旧照片感觉)
3 saturate饱和度
4 hue-rotate色相旋转
5 invert反色
6 opacity透明度
7 brightness亮度
8 contrast对比度
9 blur模糊
10 drop-shadow阴影
sepia 褐色(有种复古的旧照片感觉)
filter:sepia(70%);
hue-rotate(色彩旋转)
filter:hue-rotate(330deg);
blur(模糊)
blur(模糊效果,单位px)
filter:blur(1px);
示例图片:
invert反色
<style>
.img{
-webkit-filter:invert(100%);
}
</style>
<body>
<img src="img/boke.png" alt="">
<img class="img" src="img/boke.png" alt="">
</body>
示例图片:
brightness(%) 给图片应用一种线性乘法,使其看起来更亮或更暗。
img{
-webkit-filter: brightness(0.30);
filter: brightness(0.30);
}
contrast(%) 调整图像的对比度
img{
-webkit-filter: contrast(180%);
filter: contrast(180%);
}
grayscale(%) 将图像转换为灰度图像
img{
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
opacity(%)
filter: opacity(50%);
filter:saturate(%) 转换图像饱和度。
filter: saturate(7);