首頁  >  文章  >  web前端  >  為什麼我的圖像在 Chrome 中懸停時會向右移動?

為什麼我的圖像在 Chrome 中懸停時會向右移動?

Linda Hamilton
Linda Hamilton原創
2024-10-27 20:56:30624瀏覽

 Why Does My Image Shift Right On Hover in Chrome?

Chrome 中懸停時的圖像移動:解決不透明度問題

網頁上發現了一個特殊問題:http://www . lonewulf.eu,涉及懸停時影像的移動。這種現像是 Chrome 獨有的,需要對底層 CSS 進行調查。

提供的 CSS 包含多個不透明度聲明,表示圖片的透明度等級。但是,當啟動懸停狀態時,影像會巧妙地向右移動。

此視覺偽影的一個潛在解決方案是將以下屬性合併到控制不透明度的懸停元素中:

<code class="css">-webkit-backface-visibility: hidden;</code>

背面可見性與進行變換操作的元素的行為有關。當影像在懸停時移動時,此屬性可防止這種意外的移動。 webkit 前綴僅適用於基於 WebKit 引擎的 Web 瀏覽器,例如 Chrome。

要全面了解 backface-visibility 及其意義,請參閱 CSS-Tricks 文檔,網址為 http://css- tricks.com/almanac/properties/b/backface-visibility/.

以上是為什麼我的圖像在 Chrome 中懸停時會向右移動?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn