Question

CSS：

    body{
      background-image:url("img-address");
    }

我希望图像不要多次重复，而是跨越整个屏幕。我不想使用我想要使用的普通图像background-image。

Answer 1

您可以使用background-size：

https://www.w3schools.com/cssref/css3_pr_background-size.asp

body {
  background-size: 100% 100% ;
}

或

body {
  background-size: cover;
}

Answer 2

尝试使用本文所述的background-size: cover;：https://css-tricks.com/perfect-full-page-background-image/

它将使图像拉伸以填充可用空间并相应地缩放其容器的大小。

让我知道它是怎么回事:)）

Answer 3

您可以使用以下内容使其适合：

background-size:cover; Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges

background-size:contain; Resize the background image to make sure the image is fully visible

所以不重复：background-repeat: no-repeat;

https://www.w3schools.com/cssref/css3_pr_background-size.asp

Answer 4

使用background-repeat: none和background-size: cover

如何使我的背景图像适合整个屏幕CSS

4 个答案: