Webkit 過濾器懸停中的堆疊順序更改:了解堆疊上下文
應用WebKit 過濾器時出現有關堆疊順序的奇怪問題:懸停時在影像上,順序意外地發生了變化。要在不破壞其他網站元素的情況下解決此挑戰,請深入研究堆疊上下文的複雜性。
堆疊上下文決定了元素在頁面上顯示的順序。當元素的樣式屬性包含某些值(例如變換、溢位或篩選器)時,元素會建立新的堆疊上下文。
在提供的範例中,當將 WebKit 濾鏡(灰階)套用到映像時,堆疊上下文是自動建立的。這個新建立的上下文會導致絕對定位的 div(“.slide-content”)位於圖像下方,導致其被隱藏。
為了防止這種不良行為並保持原始的堆疊順序,這裡有一個修改後的解決方案:
替換此CSS:
<code class="css">li a:hover img { -webkit-filter: grayscale(100%); }</code>
使用此替代方案,可以避免創建堆疊上下文:
<code class="css">li a:hover img::before { content: ""; background-color: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; position: absolute; left: 0; filter: grayscale(100%); z-index: -1; }</code>
透過使用偽元素(: :before) 使用絕對位置並將其放置在圖像下方,我們可以有效地模擬濾鏡的效果,而無需創建新的堆疊上下文。這種巧妙的解決方法可以讓您實現所需的視覺效果,同時保留預期的堆疊順序。
以上是儘管 WebKit 過濾器在 CSS 中懸停,如何保持堆疊順序?的詳細內容。更多資訊請關注PHP中文網其他相關文章!