我有一個div.outer和一個div.inner,都有position:absolute;以及背景-濾鏡:模糊(8px);。
https://jsbin.com/nihakiqocu/1/edit? html,css,輸出
Safari(左)給出了想要的結果-兩個div都模糊了后面的內容。
然而Chrome(右)只應用了div.outer的模糊:
我有一個解決方案:在div.outer里面再加一個div,移動背景——濾鏡:模糊(8px);到新部門。
然而,我希望有一個解決方案不需要從第一個jsbin開始改變DOM。還有,有人知道這是什么原因嗎——是Chrome的錯誤嗎?
https://jsbin.com/rasudijame/1/edit? html,css,輸出
PS:它可以在iOS的Chrome上運行,但不能在Android的Chrome上運行,也不能在Mac OS的Chrome上運行
將背景濾鏡放在css偽元素上。這允許嵌套的背景過濾器。你也可以使用z-index:-1;將背景放在元素后面
div {
height: 100px;
width: 100px;
}
.wrapper {
position: absolute;
}
.outer, .inner {
position: relative;
}
.outer::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.outer {
background: rgba(255, 0, 0, .5);
}
.inner::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.inner {
background: rgba(0, 0, 255, .5);
top: 50px;
left: 50px;
}
main {
position: relative;
}
<main>
<div class="wrapper">
<div class="outer">
<div class="inner"></div>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus in id quos, est voluptatibus minus porro sunt totam quod commodi odit maxime similique, dolorum aut quo atque. Deleniti, voluptas animi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus in id quos, est voluptatibus minus porro sunt totam quod commodi odit maxime similique, dolorum aut quo atque. Deleniti, voluptas animi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus in id quos, est voluptatibus minus porro sunt totam quod commodi odit maxime similique, dolorum aut quo atque. Deleniti, voluptas animi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus in id quos, est voluptatibus minus porro sunt totam quod commodi odit maxime similique, dolorum aut quo atque. Deleniti, voluptas animi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus in id quos, est voluptatibus minus porro sunt totam quod commodi odit maxime similique, dolorum aut quo atque. Deleniti, voluptas animi.</p>
</main>
這是codepen
這個回答完善了@Micha的回答(對我有效)。簡單回答:Chrome主動阻止嵌套背景濾鏡堆疊。
為什么Chrome會有這樣的表現 chromium bugs tracker也報告了一個非常類似的問題。引用這個bug報告的回答:
背景過濾器將過濾它后面的所有東西,直到& quot背景根目錄& quot,由幾個觸發器構成。其中一個觸發器是另一個背景過濾元素。
因此,基本上,當您將background-filter添加到一個元素時,它將成為新的背景根:嵌套的背景過濾器將不會應用于它的任何祖先,因為它們不能& quot參見& quot在根的上方。
<elem1>
<!-- Here, backdrop filter will apply to elem1, -->
<!-- as it is an ancestor of elem2 -->
<elem2 style="backdrop-filter: ...">
<!-- Here, backdrop filter will apply to elem2, -->
<!-- but not elem1, as elem2 is now the new Backdrop root -->
<elem3 style="backdrop-filter: ...">
</elem3>
</elem2>
</elem1>
Chrome實際上遵循了W3C的建議(或者看起來是這樣)。如果你有動機,你可以在這個W3C草案中讀到這種行為存在的全部原因。
為什么公認的答案有效 before是一個偽元素,這意味著它沒有子元素。因此,即使它成為背景根,它也不會阻止嵌套過濾器應用于其祖先。
為什么它能在其他瀏覽器上工作 截至2023年5月,我已經能夠在Chrome、Safari和Firefox上測試這種行為。似乎只有Chrome遵循了這個W3C草案,因為元素在Safari和Firefox上被正確地模糊化了。然而,根據錯誤報告的回答,Safari和Firefox偏離了規范。
摘要 如果你想要一個帶有背景濾鏡的元素允許嵌套背景(例如,一個帶有下拉菜單的透明導航條,兩者都有模糊/透明效果),你應該將濾鏡應用到一個偽元素,就像@Micha建議的那樣:
/* replace */
.parent {
backdrop-filter: /*...*/;
}
/* with */
.parent::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
backdrop-filter: /*...*/;
z-index: -1;
}
注意:只有當父容器包含嵌套元素并設置了背景過濾器時,才需要這樣做,而不是“on & quot葉子& quot元素。