首页 > web前端 > css教程 > 'background-size: cover”和'background-attachment:fixed”是否会导致背景图像剪切,如何解决?

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

Mary-Kate Olsen
发布: 2024-11-27 05:41:09
原创
711 人浏览过

Does `background-size: cover` and `background-attachment: fixed` cause background image clipping, and how can it be solved?

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

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

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

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

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

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

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

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板