为什么使用'background-size: cover”时我的固定背景图像会被剪裁？

CSS 背景大小：封面和背景附件：固定剪辑背景图像

问题：

在背景图像设置为“覆盖”和“固定”的人物列表中，图像是当图形偏离视口时被剪裁。

说明：

此行为是 CSS 中“固定”定位工作方式所固有的。 “固定”定位从元素的定位上下文中删除背景图像并将其与视口对齐。因此，“background-size: cover”中的“cover”值是相对于视口计算的，而不是相对于元素本身。

建议的解决方案：

使用纯 CSS 无法对背景图像使用“固定”定位和“覆盖”。

替代方案解决方案：

不要使用“固定”定位，而是使用“滚动”作为背景附件，并在 JavaScript 中将事件侦听器绑定到滚动事件。这会根据窗口的滚动距离手动更新背景位置，模拟固定定位，同时保持相对于容器元素的“覆盖”。

以上是为什么使用'background-size: cover”时我的固定背景图像会被剪裁？的详细内容。更多信息请关注PHP中文网其他相关文章！