添加背景附件时背景图像变得太大:已修复

Question

在我的网站上，我希望正文滚动到我的标题图像上。使用background-attachment: fixed，它可以工作，但是图像变得太大，之后我的标题不再可读。换句话说，当我添加background-size: cover时，background-attachment: fixed不再起作用。

好奇是否有其他人遇到过这个问题，以及是否有人对此有解决方案。

这是我的代码：

.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% 工作。

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