CSS filter滤镜属性使用
CSS filter属性用于应用模糊或颜色调整效果,类似于PS的滤镜功能。
以下是一些常用的filter属性值及其使用示例:
blur()
- 应用高斯模糊效果。
img {
filter: blur(5px);
}
brightness()
- 调整亮度。
img {
filter: brightness(50%);
}
contrast()
- 调整对比度。
img {
filter: contrast(200%);
}
grayscale()
- 应用灰度效果。
img {
filter: grayscale(100%);
}
hue-rotate()
- 调整色调旋转度数。
img {
filter: hue-rotate(90deg);
}
invert()
- 反转输入图像颜色。
img {
filter: invert(100%);
}
opacity()
- 调整透明度。
img {
filter: opacity(50%);
}
saturate()
- 调整饱和度。
img {
filter: saturate(300%);
}
sepia()
- 将图像转换为深褐色。
img {
filter: sepia(100%);
}
drop-shadow()
- 应用阴影效果。
img {
filter: drop-shadow(16px 16px 20px red);
}
多个filter效果可以组合使用,以空格分隔:
img {
filter: contrast(175%) brightness(90%);
}
以上代码示例展示了如何在图片元素上应用各种滤镜效果。在实际应用中,可以根据需要选择合适的滤镜并调整参数值。
评论已关闭