h1的背景应该重叠图像答案

【问题标题】：Background of h1 should overlap imageh1的背景应该重叠图像
【发布时间】：2017-09-01 09:05:39
【问题描述】：

目前我在一个小型网站上遇到了一些 Css 问题。我想显示一个图像，并有一个文本（h1），它与图像的一半重叠。但我也希望文本在一个白框中。目前我已经解决了这个背景标签，但图像与 h1 背景重叠。

|~~~~~~~~~~~~~~~~~~
| image            |
|            ______|____________________________
|           | This is the Text, with background |
|            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|                  |
|~~~~~~~~~~~~~~~~~~

我希望，你明白，我想做什么......我很感谢每一个建议！

【问题讨论】：

你能提供一个 jsFiddle 或类似的东西来重现你的问题吗？谢谢
请包含您的 HTML 和 CSS 代码。
learnlayout.com

标签： css image background overlap

【解决方案1】：

我做了一个简单的例子来说明它是如何工作的

HTML

<img src="https://via.placeholder.com/100x100"/>
<h1>
This is the H1 text
</h1>

CSS

img{
   float:left;
}
h1{
  float:left;
  margin-left:-20px;
  background:white;
}

小提琴链接：https://jsfiddle.net/1b4kx9vd/

【讨论】：

这是我需要的东西。现在我只是为移动网站调整它！非常感谢！

【解决方案2】：

您可以将带有 h1 的 box 元素更改为绝对位置，选择一个您满意的位置，并在所有元素周围放置一个 div 容器，该容器是一个相对位置，以保持一切完好无损以实现响应。

<div style='position: relative;'>
  <img src='images/example.jpg'>
  <div style='position: absolute; top: 20px; left: 0px;'>
    <h1>Example Text</h1>
  </div>
</div>

只需根据您的喜好更改样式即可。

【讨论】：

【解决方案3】：

你可以把 position: absolute;顶部：100 像素；左：100px；在你的 h1 标签上的 css 中。

【讨论】：