h1的背景应该重叠图像

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

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

我希望你明白，我想要做的......我很感激每一个建议！

来源

2017-09-01 Tim

你能提供的jsfiddle或类似重现你的问题？谢谢 –

请包含您的HTML和CSS代码。 –

http://learnlayout.com – Amit

我做

的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/

来源

2017-09-01 09:13:17 wheeler

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

你可以改变用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>

只需将风格改变为你的发音

来源

2017-09-01 09:08:49 Sadie

你可以把position：absolute; top：100px;左：100px;在你的h1标签的CSS。

来源

2017-09-01 09:09:35

h1的背景应该重叠图像

回答

相关问题