🎚️CSS滤镜生成器

filter函数与单位

CSS的filter属性用于对图像或元素的外观应用效果，将blur、sepia等函数用半角空格分隔并列排列。

• px（像素）：blur函数用px指定模糊半径。指定4px时，半径4像素范围内的颜色会逐渐融合。
• %（百分比）：brightness函数和sepia函数用%指定效果强度。在brightness函数中，100%为原始亮度，120%为提亮20%。
• deg（度）：hue-rotate函数用deg指定在色相环上旋转颜色的角度。指定180deg时，颜色会转到相对的色相。

为什么排列顺序会改变结果

filter中列出的函数从左到右依次应用，前一个效果的结果会作为下一个效果的输入，因此排列顺序改变时外观也可能改变。例如先应用黑白再应用棕褐色会保留褐色调，而先应用棕褐色再应用黑白则褐色调消失。本工具中应用顺序是固定的，但生成的CSS代码可以编辑以改变顺序。

与backdrop-filter的区别

filter和backdrop-filter使用相同的函数，但应用效果的对象不同。

• filter：filter对指定元素本身（如图像或文字）的外观应用效果。
• backdrop-filter：backdrop-filter对指定元素背后显示的部分应用效果，常用于表现磨砂玻璃效果。