背景图像在本地或外部链接中不起作用答案

【问题标题】：Background-image does not work locally or with external link背景图像在本地或外部链接中不起作用
【发布时间】：2017-03-21 19:02:18
【问题描述】：

我正在尝试为项目创建背景图像，即使我使用 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) 但仍然没有。

【问题讨论】：

添加高度和宽度或在该 div 上添加一些内容
添加高度或输入一些文本，或者如果您想简单地显示图像而不显示任何内容，请添加一些填充顶部和底部值
见Background-image inside div not showing up或Background Image Not Displaying On Div都指需要一个高度
谢谢你们！非常感激。我也尝试过以 body 元素为目标，但它也没有做任何事情。
也许你的css文件在一个文件夹中？所以，css 必须是 background-image: url("../images/bird.png");

标签： html css

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

你可以检查sn-p。

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>

【讨论】：

【解决方案3】：

你需要给div加上宽度和高度。

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

<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>

【讨论】：

【解决方案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("..."); 
}

【讨论】：

【解决方案5】：

上面的解释可以正常工作，如果不是请添加一些背景属性，如背景大小、背景位置、重复等，还必须添加高度

【讨论】：