Question

我正在尝试使用CSS显示背景图片，但该图片无法显示。我正在做与w3schools.com完全相同的事情，但是没有用。

如何显示整个页面的背景图像？

div {
      background-image: url('https://imgur.com/a/Fql6rTU');
      background-repeat: no-repeat;
}

<div>
</div>

Answer 1

1。当您在分区中显示图像时，请使用background-size: cover，这样thaat图像会完全覆盖该分区，然后尝试提及该分区的height和width。

2。您为图像输入了错误的URL并进行了更正，它将可以正常工作。希望这就是您要寻找的

div {
  height: 100vh;
  width: 100vw;
  background-image: url('https://i.imgur.com/kkQFh8p.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}

<div>
</div>

Answer 2

您使用的是IMGUR页面网址，而不是实际的图像网址-打开页面，右键单击图像，然后选择“复制图像链接”（上传后也会单独显示）

body {
  background-image: url(https://i.imgur.com/kkQFh8p.jpg);
  background-repeat: no-repeat;
  background-position: center;
}

Answer 3

background-image url参数必须带有图像格式扩展名，您需要对其进行更改 https://i.imgur.com/kkQFh8p.jpg

Answer 4

您必须为该div加上背景图片的高度

div{
background:#006;padding:50px 0; background:url(https://www.nationalgeographic.com/content/dam/travel/rights-exempt/2018-travel-photographer-of-the-year/magical-mountains/dawn-vestrahorn-iceland-mountains.jpg); background-size:cover;
width:100%;
height:500px;
}

<div></div>

希望如此对您有帮助。

背景图片不显示

4 个答案: