在使用背景滤镜和相对/绝对定位时,需要将滤镜应用于另一个元素上,并将其放在要定位的元素之后。
示例代码:
HTML:
CSS: .wrapper { position: relative; } .box { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; width: 200px; height: 200px; background-color: rgba(0,0,0,0.5); } .box:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; backdrop-filter: blur(10px); z-index: -1; }
上一篇:背景滤镜影响子元素的不透明度过渡
下一篇:背景没有充满整个屏幕。