'background-size: cover”和'background-attachment:fixed”是否会导致背景图像剪切，如何解决？

CSS背景大小：覆盖背景附件：修复裁剪背景图片

你是否会遇到背景图片与background-size的情况：封面和背景附件：固定被剪裁？

The问题：
正如问题所暗示的，在人物使用背景图像的场景中，background-size: cover 和background-attachment:fixed 的组合会导致在存在偏移时背景图像被剪裁。正如 Mozilla 所记录的那样，这是 CSS 的固有行为。

目标：
期望的结果是图像垂直或水平剪切，但不能同时剪切两者，同时保持在图形本身内居中对齐。

解决方案：
不幸的是，实现仅仅使用 CSS 是不可能得到这个结果的。正如答案中所详述的，CSS 中的固定定位会造成背景图像和容器元素之间的脱节。因此，即使使用了 cover 值，图像大小也是相对于视口而不是图形的尺寸确定的。

JavaScript 替代方案：
推荐的解决方案是使用 JavaScript 来模拟计算背景大小时的固定定位效果：相对于图形元素的覆盖。这涉及监听滚动事件并手动调整背景位置以匹配视口滚动。

以上是'background-size: cover”和'background-attachment:fixed”是否会导致背景图像剪切，如何解决？的详细内容。更多信息请关注PHP中文网其他相关文章！