背景：网址（）；不工作答案

【问题标题】：background : url(); not working背景：网址（）；不工作
【发布时间】：2016-05-11 17:38:41
【问题描述】：

详细信息：在 Mac OS X 上使用 Atom 文件编辑器，在 localhost 上创建一个新站点，保存后我检查 chrome 浏览器上的更改。现在我遇到了一个问题，当我试图在 CSS 中设置部分标签的背景图像时，导致图像没有显示在网站上。

问题：我正在尝试使用 stellar.js 视差插件，为此我需要将部分标记的背景属性设置为我选择的图像。问题是当我使用“背景：url（parallax1.png）；”图片没有显示在网站上，只显示一个白色的空白区域。

HTML 文件：

<!-- Attempting Parallax Here -->
<section class="parallax1 pic1">
</section>
<!-- Ending Attempt Here -->

CSS 文件：

.pic1
{
  background : url(parallax1.png);
}
.parallaxcontent
{
  background-attachment: fixed;
  background-repeat: no-repeat;
  position: relative;
  background-size : cover;
  width: 100%;
  height: auto;
}

你应该知道的点：

图片 parallax1.png 在同一目录下，我检查了拼写，是正确的。
我也尝试过使用 background-image: 而不是 background: 。
如果我使用图像会完美显示
我尝试将 parallax.png 包含在 '' 和 "" 中。

任何帮助将不胜感激，谢谢。

【问题讨论】：

应该 .parallaxcontent 是 .parallax1 以匹配您的类名吗？
您可能希望将 CSS 属性更改为 .pic1{background-image:url("parallax1.png");} ，假设图像 (parallax1.png) 存储在根目录中。
.parallax1 类中的哪些设置也适用于该元素？也许他们会覆盖 .pic1 类？

标签： html css background background-image stellar.js

【解决方案1】：

一般情况下，section标签内应该有一些内容，或者可以在.pic1类中设置

min-height:200px;

【讨论】：

谢谢，添加高度后代码运行良好！

【解决方案2】：

试试background : url("parallax1.png");

在这里阅读更多 CSS background Property

【讨论】：

【解决方案3】：

看看

html

<section class="parallax1 pic1">
</section>

css

.pic1
{
  background: blue url("https://static.xx.fbcdn.net/rsrc.php/v2/y6/r/QDLPxJ5bMSg.png");
  width: 100px;
  height: 32px;
  border:1px solid #000;
}
.parallaxcontent
{
  background-attachment: fixed;
  background-repeat: no-repeat;
  position: relative;
  background-size : cover;
  width: 100%;
  height: auto;
}

工作Fiddle

【讨论】：