移除backdrop-filter致组件背景消失的原因及解决方法

问题成因 #

你遇到的组件文字、背景全消失问题，核心原因是错误修改了background属性的SCSS写法，和删除模糊属性本身无关：

• 原始代码里的$color-surface($background, 0.5)是项目预先定义的SCSS颜色生成函数，需要传入基础色、透明度两个参数才能返回合法的颜色值，它本身不是一个存储纯色值的变量。
• 你修改后的写法rgba($color-surface, 0.5)直接把函数名作为变量传入rgba()，SCSS编译时无法解析出有效颜色值，最终生成的CSS里background是非法属性，会被浏览器直接丢弃；如果编译阶段没有抛出报错，大概率会被解析为完全透明值，最终呈现出背景、文字（如果文字颜色继承逻辑也受父级透明属性影响的话）全部消失的效果。
• 你猜测的白色背景覆盖问题不成立，属性值非法时浏览器不会默认渲染白色背景，只会忽略整条无效样式。

正确移除模糊效果的写法 #

你不需要改动原本正常的background属性，只需要删除控制毛玻璃模糊的backdrop-filter那一行即可，修改后的合法代码如下：

@mixin card {
    // 保留原有自定义颜色函数的调用方式，不要随意修改传参结构
    background: $color-surface($background, 0.5);
    border-radius: $card-border-radius;
}

额外调整建议 #

• 原始代码里background属性末尾多写了一个冗余分号，属于笔误，删除不影响样式效果。
• 移除backdrop-filter后如果觉得半透明背景太透、视觉效果和预期不符，只需要调整$color-surface函数传入的第二个透明度参数即可（比如把0.5调整为0.7~0.9区间的数值），不要改动函数的调用格式。
• 后续修改项目SCSS样式时，不要随意替换项目自定义的颜色工具函数，除非你提前确认对应标识符是预定义的纯色变量，而非需要传参的函数。

内容的提问来源于stack exchange，提问作者Bruce