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的背景應該重疊圖像

回答

相關問題