h1 的背景应该与图像重叠

Question

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

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

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

Answer 1

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

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

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

Answer 2

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

Answer 3

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

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 Link: https://jsfiddle.net/1b4kx9vd/

h1 的背景应该与图像重叠

Background of h1 should overlap image

css

image

background

overlap