css - 添加背景附件时背景图像变得太大 : fixed

Question

在我的网站上，我希望正文滚动到我的标题图片上。使用 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 将处理图像，就好像元素是视口(viewport)的 100% 高度和宽度一样。因此 background-size: cover; 将调整图像高度以适应视口(viewport)。

尝试使用 background-size: 100% auto;(宽度的 100% | auto 将设置高度不会拉伸(stretch)图像)

我在您这边进行了测试，经过修改后 100% 有效。

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