為什麼在使用'background-size: cover”和'background-attachment:fixed”時，我剪裁的背景圖像會意外被裁剪？

使用CSS 剪切背景圖像 background-size: cover 背景附件: 固定

使用CSS 屬性background-size: cover 和background-attachment: 固定時容器元素，如果該元素不是視口的完整大小，則背景圖像可能會被意外剪切。這是由於兩個屬性的組合所致，如下所述。

background-attachment:fixed 的效果

background-attachment:fixed 使背景圖像的行為類似於position:fixed 元素，這意味著它不再是文件正常流程的一部分，並且相對於視口保持靜止。

與背景大小的交互作用： cover

background-size：cover 縮放背景影像以覆蓋整個容器元素。當與background-attachment：fixed結合使用時，這表示影像會縮放以覆蓋整個視口，而不僅僅是容器元素。

背景影像的裁切

如果容器元素是小於視窗時，背景影像將被裁切以垂直適合容器元素。但是，它仍然會水平縮放以覆蓋整個視口寬度。這可能會導致影像在左側和右側被剪切。

解決方案

不幸的是，沒有辦法達到預期的效果（圖像垂直或水平剪切，但不能同時剪切，並且以容器元素為中心）使用純 CSS。這是因為固定定位在CSS中工作的基本方式。

要達到想要的效果，需要使用JavaScript手動更新相對於視窗滾動位置的background-position屬性，模擬固定定位定位同時仍在計算背景大小：相對於容器元素的覆蓋。

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