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%的{{1}}将以不会拉伸图像的方式设置高度）

我在你身边进行了测试，并通过该编辑100％工作。

不幸的是我无法添加剪切代码，因为它会将背景调整为stackoverflows视口而不是代码片段视口。

添加背景附件时背景图像太大：已修复

1 个答案: