我的问题会非常简洁。我看到了这个 Deezer 页面，我尝试放大和缩小，发现图像“超出了缩放范围”(见下图)
以下是我们认为是我的页面的结构:
<body>
<div class="visual-header">
<div class="container">
SOME TEXT
</div>
</div>
PAGE CONTENT
</body>
我该如何使用尺寸为 2000x800 像素的 image.png 来获得这种效果？
最佳答案
这将使背景图像适合屏幕的宽度，无论缩放级别如何。
BODY
{
background-image: url("http://www.psdgraphics.com/file/colorful-triangles-background.jpg");
background-size: 100%;
}如果您希望图像水平和垂直拉伸(stretch)(并且不保留其纵横比)，请使用:
BODY
{
margin: 0;
min-height: 100vh;
background-image: url("http://www.psdgraphics.com/file/colorful-triangles-background.jpg");
background-size: 100% 100%;
}关于javascript - 如何用CSS创建一个不受页面缩放影响的div背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31124120/