一、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>