为什么图像样式会阻止另一张图像？答案

【问题标题】：Why does image style blocks another image?为什么图像样式会阻止另一张图像？
【发布时间】：2023-04-07 14:29:01
【问题描述】：

我正在开发一个网站并尝试为该网站添加背景图片。我在添加图片后决定了这一点。图片显示，但背景图像没有。我开始乱搞，当我注释掉图像的样式时，就会出现背景图像。我想保留样式并同时显示背景图像。

所以.home-image 显示，但是当background-image for #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);
}

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

      <!-- MAKING OF THE FEATURED REVIEWS IMAGES -->
      <!-- BORDER OF FEATURED REVIEWS ON HOME PAGE -->
      <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>
          <!-- END 'FEATURE-REVIEW-HOLDER' -->

        </figure>

      </div>

【问题讨论】：

对不起。我又在做这个，看到一个额外的花括号。我删除了它，保存了页面并刷新了 chrome。背景图像弹出。我在提出这个问题时注意到了这一点，但当时并没有想到。

标签： html css image background background-image

【解决方案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>

【讨论】：

我相信我的图像路径是正确的，因为当卡车的样式被注释掉时，背景图像就会出现。我还使用相对路径尝试了您的建议。我复制了它，但也没有用。
你有一个现场网站，我们可以看看和检查吗？也许您需要 wordpress 主题的路径 -> background-image: url("/wp-content/themes/themeNameHere/images/tire.png ");

【解决方案2】：

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

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

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

感谢大家的帮助。

更新：

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

    /* 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);

}

【讨论】：