添加 background-attachment 时背景图像变得太大：已修复

Question

在我的网站上，我希望 body 滚动我的 header 图片。使用 background-attachment: fixed，它可以工作，但是图像变得太大，之后我的标题就不再可读了。换句话说，当我添加 background-attachment: fixed.

时，background-size: cover 不再起作用

想知道是否有其他人遇到过这个问题以及是否有人对此有解决方案。

这是我的代码：

.site-header {
   background: url("https://howtogetrippedathome.com/wp-content/uploads/2018/01/How-To-Get-Ripped-At-Home-Header-Image.png") top;
   background-size: cover;
}

PS2，我的网站：https://howtogetrippedathome.com/

Answer 1

background-attachment: fixed 将处理图像，就好像元素是视口的 100% 高度和宽度一样。因此 background-size: cover; 将调整图像高度以适应视口。

尝试使用 background-size: 100% auto;（宽度的 100% | auto 将以不会拉伸图像的方式设置高度）

我在您这边进行了测试，通过该编辑，它 100% 有效。

不幸的是，我无法添加截取的代码，因为它会将背景大小调整为 Whosebugs 视口，而不是代码片段视口。

添加 background-attachment 时背景图像变得太大：已修复

Background image gets too big when adding background-attachment: fixed

css

background

fixed