原图:
模糊(blur)
单位可为px或rem,值越大,越模糊
filter:blur(3px)
filter:blur(0.3rem)
亮度(brightness)
值可为数字或百分数,小于1时,亮度更暗;等于1时,无变化;大于1时,亮度更亮
filter:brightness(1.5)
filter:brightness(150%)
对比度(contrast)
值可为数字或百分数,小于1时,对比度更低;等于1时,无变化;大于1时,对比度更高
filter:contrast(0.7)
filter:contrast(70%)
阴影(drop-shadow)
四个属性分别为:offset-x(阴影左右偏移的位置) offset-y(阴影上下偏移的位置) blur-radius(阴影模糊范围) color(阴影颜色)
filter:drop-shadow(-20px 10px 14px #c112d1)
灰度 (grayscale)
值可为数字或百分数,等于0时,无变化;等于1时,为全灰;小于0大于1时,灰度为中间值
filter:grayscale(0.8)
filter:grayscale(80%)
色调旋转(hue-rotate)
单位为deg,值为0deg时,无变化,90deg=0.25turn,-90deg=270deg
filter:hue-rotate(90deg)
filter:hue-rotate(0.25turn)
反色(invert)
值可为数字或百分数,等于0时,无变化;等于1时,完全反色
filter:invert(0.6)
filter:invert(60%)
透明度 (opacity)
值可为数字或百分数,等于0时,为透明;等于0.5时,半透明;等于1时,无变化。
filter:opacity(0.3)
filter:opacity(30%)
饱和度(saturate)
值可为数字或百分数,等于0时,无饱和度;等于0.5时,半饱和度;等于1时,无变化;大于1时,为更大饱和度。
filter:saturate(3)
filter:saturate(300%)
褐度(sepia)
值可为数字或百分数,等于0时,无变化;等于1时,为全褐;小于0大于1时,褐度为中间值
filter:sepia(0.65)
filter:sepia(65%)