Question

我的问题非常简洁。我看到了这个Deezer页面，我试图放大和缩小以查看图像“超出缩放”（见下图）

enter image description here

以下是我们认为是我的页面的结构：

<body>
  <div class="visual-header">
    <div class="container">
       SOME TEXT
    </div>
  </div>
  PAGE CONTENT
</body>

我应该如何使用大小为2000x800像素的image.png来获得此效果？

Answer 1

这将使背景图像适合屏幕的宽度，无论缩放级别如何。

BODY
{
    background-image: url("http://www.psdgraphics.com/file/colorful-triangles-background.jpg");
    background-size: 100%;
}

如果您希望图像水平和垂直拉伸（并且不保持其纵横比），请使用：

BODY
{
    margin: 0;
    min-height: 100vh;
    background-image: url("http://www.psdgraphics.com/file/colorful-triangles-background.jpg");
    background-size: 100% 100%;
}

如何使用CSS创建不受页面缩放影响的div背景

1 个答案: