CSS 滤镜 filter

项目场景：

提示：这里简述项目相关背景：

项目场景：最近在挑战github上的JavaScript30挑战，遇到一个css的filter 属性，怕忘记，故记录。

---

第一次用filter属性

提示：这里描述项目中遇到的问题：

例如：使用img时候，需要把img模糊，用到了filter属性

		:root {
				--base: #ffc600;
				--spacing: 10px;
				--blur: 10px;

			}

			img {
				padding: var(--spacing);
				background: var(--base);
				filter: blur(var(--blur));
			}

---

总结：

提示：这里填写问题的分析：

filter 属性是用于在 CSS 中应用图像滤镜效果的样式属性。它可以用来改变图像或元素的外观，添加一些特殊的视觉效果。以下是一些常见的 filter 属性用法：

模糊（blur）：
filter: blur(5px); /* 应用5像素的模糊效果 /
饱和度（saturate）：
filter: saturate(200%); / 增加图像的饱和度 /
对比度（contrast）：
filter: contrast(150%); / 增加对比度 /
亮度（brightness）：
filter: brightness(150%); / 增加亮度 /
色相旋转（hue-rotate）：
filter: hue-rotate(90deg); / 顺时针旋转颜色90度 /
反转颜色（invert）：
filter: invert(100%); / 反转图像颜色 /
透明度（opacity）：
filter: opacity(50%); / 降低元素的不透明度 /
阴影（drop-shadow）：
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5)); / 添加阴影效果 */

---

解决方案：

提示：上面这些是 filter 属性的一些基本用法。你可以根据需要组合多个滤镜效果，也可以调整滤镜效果的参数值来获得不同的视觉效果。请注意，filter 属性在不同浏览器中的支持程度可能会有所不同，因此最好在项目中测试并考虑浏览器兼容性。