为啥我的 <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> 中没有出现背景图像?的主要内容,如果未能解决你的问题,请参考以下文章