为什么我的 <div> 中没有出现背景图像？答案

【问题标题】：Why isn't the background image appearing inside my <div>?为什么我的 <div> 中没有出现背景图像？
【发布时间】：2020-10-25 09:29:31
【问题描述】：

我正在尝试仅为网页的这一部分放置背景图片，我将图片作为 id（水果）放置，但它没有出现。这是我的代码：

   <div class="p-1 text-center bg-light" id="fruit">
      <div class="col-md-6 mx-auto my-5">
        <h1 class="display-4 font-weight-normal">TrendyEats</h1>
        <p class="lead font-weight-normal">The Latest Food Trends</p>
        <a class="btn btn-outline-secondary" href="#">Login</a>
        <p class="small pt-4">blablabla </p>
      </div>
    </div>

水果 id 的 css 是：

#fruit {
   background-image: url('/Pictures/fruits.jpg');
   alt:"woops";
 }

“alt”也没有出现。

感谢任何帮助，谢谢！

编辑：已修复，看来我必须写“Pictures/fruits.jpg”而不是“/Pictures/fruits.jpg”

【问题讨论】：

很好的问题 - 格式要点。 - alt 仅适用于图像。这是一个属性。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
The "alt" also doesn't appear. 是的，它不会，也许描述你想要做什么.. 某种:hover ？从外观上看，您希望将 alt 放入 HTML 方面。
stackoverflow.com/questions/38380115/…
如果你尝试 background-color: pink;而不是背景图像......这行得通吗？ IE。你有粉红色的背景吗？
@Pogrindis 我明白了，谢谢，我想我将 html 的图片语法与 css 混淆了。 alt 是 html 图像标签的属性，而不是 css 属性。我想要做的是在包含“TrendyEats”直到“blablabla”的 div 后面添加一个背景图像，因此，在文本后面添加一张图片。这有意义吗？

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

您可能需要检查您的相对链接是否正确。如果我用外部链接替换它，背景就会很好地显示出来。

您想在 HTML 中的 img 标记中添加 alt - 在您的情况下，您没有这个。如果您通过 CSS 添加背景图片，则可能需要添加纯色作为替代，以在链接失败时显示为备用。

【讨论】：

【解决方案2】：

尝试添加

#friut {
  background-image: url("./Pictures/fruits.jpg");
  background-color: #000;
}

还要检查您是否已将 css 文件正确链接到 html 页面。

【讨论】：

我把它修好了，看来我必须写“Pictures/fruits.jpg”而不是“/Pictures/fruits.jpg”

【解决方案3】：

请检查图片 url 是否有效，[我在 #fruit 之后将其替换为内容] 您不能将 alt 放在需要添加到 html 图像上的 css 中，因为它是 html 属性，您可以在其中使用 JavaScript 添加或设置它。

#fruit {
   background-image: url('https://www.w3schools.com/w3css/img_lights.jpg'); 
 }
 
#fruit:after {
  content: " (woops)";
}

<div class="p-1 text-center bg-light" id="fruit">
      <div class="col-md-6 mx-auto my-5">
        <h1 class="display-4 font-weight-normal">TrendyEats</h1>
        <p class="lead font-weight-normal">The Latest Food Trends</p>
        <a class="btn btn-outline-secondary" href="#">Login</a>
        <p class="small pt-4">blablabla </p>
      </div>
    </div>

【讨论】：