為什麼使用'background-size: cover”時我的固定背景圖像會被剪裁？

CSS 背景大小：封面和背景附件：固定剪輯背景圖像

問題：

在背景影像設定為「覆蓋」和「固定」的人物清單中，影像是當圖形偏離視窗時被剪裁。

說明：

此行為是 CSS 中「固定」定位運作方式所固有的。 「固定」定位從元素的定位上下文中刪除背景影像並將其與視窗對齊。因此，「background-size: cover」中的「cover」值是相對於視口計算的，而不是相對於元素本身。

建議的解決方案：

使用純 CSS 無法對背景圖像使用「固定」定位和「覆蓋」。

替代方案解決方案：

不要使用「固定」定位，而是使用「捲動」作為背景附件，並在JavaScript 中將事件偵聽器綁定到滾動事件。這會根據視窗的滾動距離手動更新背景位置，模擬固定定位，同時保持相對於容器元素的「覆蓋」。

以上是為什麼使用'background-size: cover”時我的固定背景圖像會被剪裁？的詳細內容。更多資訊請關注PHP中文網其他相關文章！