缓存问题: 在开发环境中,CSS 的变更有时可能因为缓存问题而未能立即生效。尝试清除浏览器缓存或使用无痕/隐私模式重新加载页面,以查看更改是否生效。 元素层级与定位: 确保应用 backdrop-filter 的元素具有适当的层级和定位,以便其背景可以被正确渲染。例如,如果元素被设置为 position: static,则可能无法正确应用 backdr...
由于使用了伪元素叠加了一层背景,因为层级关系,父元素的 background 是在最下层的,所以元素本身的背景色其实并没有被充分体现,可以对比下两种方法的实际效果图: 解决方案是再通过另外一个伪元素再叠加一层背景色,这个背景色应该是原本赋值给父元素本身的。 叠加之后的效果如下: CodePen Demo -- 使用 background-a...