欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

背景-過濾器不適用于Chrome中的嵌套元素

錢琪琛1年前7瀏覽0評論

我有一個div.outer和一個div.inner,都有position:absolute;以及背景-濾鏡:模糊(8px);。

https://jsbin.com/nihakiqocu/1/edit? html,css,輸出

Safari(左)給出了想要的結果-兩個div都模糊了后面的內容。

然而Chrome(右)只應用了div.outer的模糊:

SafariChrome

我有一個解決方案:在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元素。