Question

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

问题：我正在尝试使用stellar.js视差插件，为此我需要将section标签的background属性设置为我选择的图像。问题是当我使用＆＃34; background：url（parallax1.png）;＆＃34;图像未显示在网站上，只显示白色空白区域。

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：。
如果我使用＆lt; img src =＆＃34; parallax.png＆＃34; /＆GT;图像完美显示
我试图将parallax.png包裹在＆＃39;＆＃39;以及＆＃34;＆＃34;。

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

Answer 1

通常，您应该在section标签中包含一些内容，或者可以在.pic1 class

中设置

min-height:200px;

Answer 2

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

在这里阅读更多内容 CSS background Property

Answer 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

background：url（）;不工作

3 个答案: