Question

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

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

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

Answer 1

您可以将带有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>

只需将样式更改为您的样式。

Answer 2

你可以把位置：绝对;上：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;
}

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

h1的背景应该与图像重叠

3 个答案: