css - h1 的背景应该与图像重叠

Question

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

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

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

Answer 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;
}

fiddle 链接:https://jsfiddle.net/1b4kx9vd/