为啥我的 <div> 中没有出现背景图像?

Posted

技术标签:

【中文标题】为啥我的 <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 方面。 ***.com/questions/38380115/… 如果你尝试 background-color: pink;而不是背景图像......这行得通吗? IE。你有粉红色的背景吗? @Pogrindis 我明白了,谢谢,我想我将 html 的图片语法与 css 混淆了。 alt 是 html 图像标签的属性,而不是 css 属性。我想要做的是在包含“TrendyEats”直到“blablabla”的 div 后面添加一个背景图像,因此,在文本后面添加一张图片。这有意义吗? 【参考方案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>

【讨论】:

以上是关于为啥我的 <div> 中没有出现背景图像?的主要内容,如果未能解决你的问题,请参考以下文章

为div设置背景图片后,为啥不显示背景图片?

CSS中为啥我设置了背景为半透明,连字体都透明了

出现叠加时防止背景滚动

为啥我的背景颜色没有显示在 <p> 上? [复制]

CSS 设置的高度超出屏幕高度为啥没出现滚动条

为啥我的条件逻辑在 Jinja2/CherryPy 中没有按预期工作?