如何在html中将图像添加到我的标题背景？答案

【问题标题】：How to add an image to my header background in html?如何在html中将图像添加到我的标题背景？
【发布时间】：2021-12-16 20:28:33
【问题描述】：

我想在标题背景中添加图片，我尝试了this，但没有成功。

我做错了什么？

div.cabecalho {
  padding: 20px;
  font-size: 250%;
  text-align: center;
  background-image: url(https://via.placeholder.com/800/ff0000);
  vertical-align: middle;
  color: #ffffff;
  border-bottom: 30px solid #0f4098;
  width: 100%;
  align-items: center;
}

div.cabecalho span {
  margin-left: 20px;
}

img {
  object-fit: cover;
}

<div class="cabecalho">
  <img src="https://via.placeholder.com/320x300" width="320" height="300">
  <span>Desempenho do <strong>PIB</strong> no terceiro trimestre de 2021</span>
</div>

【问题讨论】：

它似乎对我有用。它以什么方式不适合您？您确定图片存在于给定路径中吗？
我创建了一个 sn-p 来证明您的代码有效。如果图像路径有问题，我们无法提供帮助。您必须在本地进行调试。
我的意思是，目前还不清楚您面临什么问题。请修改为更具体。有关提示，请参阅 How to Ask。
对我来说，它只是显示一个白色背景

标签： html css

【解决方案1】：

根据text-align: center;、vertical-align: middle 和align-items: center; 判断，我将大胆猜测并假设您希望背景图像居中。您可以在 CSS 中使用 background-image: center;。 background-size: cover; 在整个标题中展开整个图像。 align-items: center; 通常只适用于 flex 或 grids

查看here 了解有关背景属性的更多信息。

div.cabecalho {
  padding: 20px;
  font-size: 250%;
  text-align: center;
  background-image: url(https://via.placeholder.com/800/ff0000);
  background-position: center;
  background-size: cover;
  color: #ffffff;
  border-bottom: 30px solid #0f4098;
  width: 100%;
  align-items: center;
}

div.cabecalho span {
  margin-left: 20px;
}

img {
  object-fit: cover;
}

<div class="cabecalho">
  <img src="#" width="320" height="300">
  <span>Desempenho do <strong>PIB</strong> no terceiro trimestre de 2021</span>
</div>

【讨论】：

【解决方案2】：

您的 css 和 html 看起来可以正常工作。事实上，当我自己尝试复制和粘贴时，但改变了图像，它确实奏效了。您的图像文件的路径可能有问题。尝试在浏览器中直接导航到它们，看看它们是否正常显示。

编辑：发布此内容后，对原始问题进行了编辑，以将作者的图像路径和名称替换为占位符。这似乎证实了我的上述陈述，因为使用“运行代码 sn-p”和占位符图像有效。因此，问题似乎仍然与正在使用的图像有关。可能路径不正确，或者图像不在那里。

【讨论】：

建议某人检查路径更多的是评论而不是答案。当你有更多的声誉时，你就可以这样做。

【解决方案3】：

这两个图像都显示在我这边。 800x800 只能在小屏幕中看到。

例如，将您的高度设置为 100vh，您将能够看到它。您可能需要调整图像的宽度以适合您的标题容器。

另外请检查您的 css img 选择器。即使您删除它，您的代码也将作为 img { 适合对象：封面； } 不管用。您的代码正在应用您在 html 上设置的宽度。

【讨论】：