Question

我正在一个网站上，试图为该网站添加背景图片。我在添加图片后决定了这一点。图片显示，但背景图像不显示。我开始四处乱逛，当我注释掉图像的样式时，将显示背景图像。我想保留样式并同时显示背景图片。

所以.home-image会显示出来，但是background-image的{{1}}会被屏蔽掉。

任何建议都值得赞赏。

#wrapper

.feature-review-border {
  max-width: 500px;
  padding: 7px;
  background-color: #d83c12;
  margin: 15px auto;
  border-radius: 9px;
}

.feature-review-holder1 {
  width: 500px;
  height: 380px;
  background-color: #f4b183;
  margin: auto;
  border-radius: 9px;
  text-align: center;
}

.home-image {
  height: 250px;
  width: 400px;
}

#wrapper {
  background-image: url(images/tire.png);
}

Answer 1

我认为您的图片路径不正确。尝试使用相对路径，例如：

#wrapper    {
   background-image:url(./images/tire.png);
}

这也是一个带有虚拟图像的工作示例：

.feature-review-border  {
  max-width:500px;
  padding:7px;
  background-color:#d83c12;
  margin:15px auto;
  border-radius:9px;
}

.feature-review-holder1 {
  width:500px;
  height:380px;
  background-color:#f4b183;
  margin:auto;
  border-radius:9px;
  text-align:center;
}

.home-image {
  height:250px;
  width:400px;
}

#wrapper    {
  background-image:url(https://via.placeholder.com/1000);
}

<div id="wrapper">
    <header>
        <h1 class="text-format">Car Reviewer</h1>
    </header>
    <nav class="text-format">
        <ul>
            <li> <a href="index.html">Home</a> </li>
            <li> <a href="reviews.html">Reviews</a> </li>
            <li> <a href="about.html">About</a> </li>
        </ul>
    </nav>
    <main>
        <h2 class="text-format">Featured Reviews</h2>
        <div class="feature-review-border">
            <figure>
                <!-- IMAGE CONTAINER -->
                <div class="feature-review-holder1">
                    <img src="images/f150.png" alt="Ford F-150" class="home-image">

                    <figcaption>"The hands free options are easy to use and I use the bluetooth connectivity to play music and make phone calls" - Bob
                    </figcaption>
                </div>
            </figure>
        </div>
    </main>
</div>

Answer 2

在我第一次提出问题时，您不会在我添加的代码中看到错误。在提出问题时，我添加了代码，并在CSS中看到了一个额外的花括号。我什么都没想到，只是删除了。

今天查看我的代码时，我注意到了，想知道为什么它在那里。我删除了它，保存了页面，然后刷新了Chrome。 oom，我的背景图片弹出了。

对不起，我给您带来的所有额外工作。绝对是我必须学习的一课。

感谢您的帮助。

更新：

我重新创建了显示错误的代码

    /* CAPTION OF IMAGE */
figcaption  {
font-family:calibri;
font-weight:bold;
font-style:italic;
font-size:26px;
padding:0px 15px;

}

}应该删除

#wrapper    {
background-image:url(images/tire.png);

}

为什么图像样式会阻止其他图像？

2 个答案: