Question

我正在尝试为项目创建背景图像，即使我使用Photobucket链接（http://i1339.photobucket.com/albums/o714/garlandjon95/MovingMountains_zps5s3fqnf0.png），它仍然无法正常工作。我将图像本地保存在名为images的文件夹中，在本地名为birds.png，但我的页面中仍然没有图像。

HTML：

<body>

<h1>On The Fly Web Design</h1>
<p>Your needs on the fly</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

<div></div>

</body>

CSS：

div {
  background-image:      url("http://i1339.photobucket.com/albums/o714/garlandjon95/MovingMountains_zps5s3fqnf0.png");
}

我已经尝试了url（images / bird.png），但仍然没有。

Answer 1

您需要定义高度或向div添加内容。尝试将背景添加到身体并查看您获得的效果。或者添加：

div{
   height:300px;
   width:300px;
   background-image: url("http://i1339.photobucket.com/albums/o714/garlandjon95/MovingMountains_zps5s3fqnf0.png");
}

Answer 2

您没有看到背景图片，因为您添加背景图片的div为空。您需要向其添加一些内容或定义其高度和宽度。

您可以查看代码段。

div {
  background-image: url("http://i1339.photobucket.com/albums/o714/garlandjon95/MovingMountains_zps5s3fqnf0.png");
  height: 590px;
  width: 100%;
}

<h1>On The Fly Web Design</h1>
<p>Your needs on the fly</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

<div></div>

Answer 3

您需要为div添加宽度和高度。

＆＃13;

div{
width:100%;
height:400px;
background-image:url("http://i1339.photobucket.com/albums/o714/garlandjon95/MovingMountains_zps5s3fqnf0.png");
}

＆＃13;

<body>

<h1>On The Fly Web Design</h1>
<p>Your needs on the fly</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

<div></div>

</body>

＆＃13;

Answer 4

可能是因为此div内部没有内容，因此高度为0px且背景图像不会显示。尝试围绕其余内容移动div标签，并为其提供一个类名称，以便稍后有多个div时使用：

<body>

 <div class="page-content">
  <h1>On The Fly Web Design</h1>
  <p>Your needs on the fly</p>

  ...

 </div>

</body>

然后你的css：

.page-content { 
  background-image: url("..."); 
}

Answer 5

上面的解释会很好，如果不是很好的添加一些背景属性，如背景大小，背景位置，重复等，还必须添加高度

背景图片无法在本地或使用外部链接

5 个答案: