抱歉，如果我的问题问得不好!
我会创建一个带有背景图片的网站，并在一个图层上放置一个包含我所有文字的正方形。但是正方形在高度上会比屏幕大。这是我的实际代码:
<html>
...
<body style="background-image: url(rs/bg32.svg); background-repeat: no-repeat; background-size: cover; size : 100% 100%">
<div class="alpha layer"; style="background-color: #ffffff70; height: 100px; margin: 20px 10px">
</div>
</body>
</html>
它创建了图 1 中的网站。
(是的，里面写着“你好”，因为我试着在里面放一些东西，看看它是否解决了我的问题，但显然根本没有)
但是当我设置的高度大于屏幕尺寸时，一切都出错了(图 2 和图 3)。
按 100% 缩放:
按 25% 缩放:
有人可以帮助我吗？
最佳答案
您可以将 html 和 body 设置为 100% 的高度，并在 body 上设置 background-attachment: fixed 以保持背景滚动图像:
html,
body {
height: 100%;
}
body {
background-image: url(//placekitten.com/1920/1080);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
div.alpha.layer {
background-color: #ffffff70;
margin: 20px 10px;
height: 1500px;
}<div class="alpha layer" ; style="">
</div>关于css - 如何在背景中添加图像并在其上添加滚动矩形？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58432139/