为什么在使用'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中文网其他相关文章！