一、filter属性简介
| 值 |
描述 |
示例 |
| blur(Npx) |
设置高斯模糊效果。N是模糊半径，值越大，模糊效果越明显。 |
filter: blur(5px); |
| brightness(%) |
调整图像的亮度。百分比值小于100%会使图像变暗，大于100%会使图像变亮。 |
filter: brightness(75%); |
| contrast(%) |
调整图像的对比度。百分比值小于100%会降低对比度，大于100%会提高对比度。 |
filter: contrast(150%); |
| drop-shadow(h-offset v-offset blur spread color) |
为图像添加阴影效果。参数分别表示水平偏移、垂直偏移、模糊半径、阴影扩展半径和阴影颜色。 |
filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.5)); |
| grayscale(%) |
将图像转换为灰度。百分比值表示灰度级别，100%完全灰度，0%无变化。 |
filter: grayscale(50%); |
| hue-rotate(deg) |
改变图像的色相。角度值表示在色相环中旋转的角度。 |
filter: hue-rotate(90deg); |
| invert(%) |
反转图像的颜色。百分比值表示反转强度，100%完全反转，0%无变化。 |
filter: invert(75%); |
| opacity(%) |
设置图像的透明度。百分比值表示透明度级别，0%完全透明，100%完全不透明。 |
filter: opacity(50%); |
| saturate(%) |
调整图像饱和度。百分比值小于100%会降低饱和度，大于100%会提高饱和度。 |
filter: saturate(120%); |
| sepia(%) |
将图像转换为褐色调。百分比值表示褐色级别，100%完全褐色，0%无变化。 |
filter: sepia(60%); |
二、使用样例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>filter</title>
</head>
<body>
<img src="http://cdn.ljynet.com/img/bit.svg" alt="" />
<style>
img {
filter: grayscale(100%) blur(1px);
transition: all 0.3s;
}
img:hover {
filter: grayscale(0%);
transition: all 0.3s;
}
</style>
</body>
</html>
