CSS之filter滤镜属性

一、问题引入

图片尺寸不固定，根据本身大小，增加黑色遮罩。

方案：1.加上父元素，内容设置fit-content自适应，然后增加遮罩子元素定位；2.考虑直接css的filter滤镜直接实现

二、filter属性

filter属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。

三、filter属性值

基础滤镜

1. blur(px)
   毛玻璃效果，数值越大越模糊（如 blur(5px)）。

2. drop-shadow(x-offset y-offset blur color)
   投射阴影，类似 box-shadow 但作用于元素整体（如 drop-shadow(2px 2px 4px rgba(0,0,0,0.5))）。

3. opacity(%)
   透明度调整（0% 完全透明，100% 无变化）。

4. grayscale(%)
   灰度化（0% 正常，100% 完全灰度）。

颜色调整

5. brightness(%)
   亮度（>100% 更亮，<100% 更暗）。

6. contrast(%)
   对比度（>100% 对比更强）。

7. hue-rotate(deg)
   色相旋转（如 hue-rotate(90deg) 改变颜色色调）。

8. invert(%)
   反色效果（100% 完全反色）。

9. saturate(%)
   饱和度（>100% 更鲜艳）。

特殊效果

10. sepia(%)
    复古褐化效果（100% 完全深褐色）。

11. url(#svg-filter)
    引用 SVG 自定义滤镜（需 SVG 滤镜资源支持）。

组合与默认

• none
  默认值，无滤镜效果。
• 多滤镜组合
  用空格分隔多个滤镜（如 filter: brightness(120%) contrast(90%)）。

四、filter示例

<template>
  <img :style="{ filter: 'grayscale(80%) blur(2px)' }" src="image.jpg" />
</template>

上述场景，图片黑色遮罩，无需考虑图片尺寸，直接给img加上filter属性即可

img {
    filter: brightness(0.5)
}