Hintergrund von h1 sollte Bild überlappen

Question

zur Zeit habe ich einige Probleme mit Css auf einer kleinen Website. Ich möchte ein Bild anzeigen und habe einen Text (h1), der die Hälfte des Bildes überlappt. Aber ich möchte auch, dass der Text in einer weißen Box erscheint. corrently "Ich habe diese, die den Hintergrund-Tag gelöst, aber das Bild überlappt die h1-Hintergrund.

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

Ich hoffe, Sie verstehen, was ich für jeden Rat ... Ich bin dankbar tun wollen !

Answer 1

habe ich ein einfaches Beispiel, wie es

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 funktioniert könnte: https://jsfiddle.net/1b4kx9vd/

Answer 2

Sie könnten eine Position, um die Box-Element mit dem h1 in eine Position absolut, zu wählen ändern mit Ihnen zufrieden sind und um alle Elemente einen div Container haben, die eine Position relativ alles zu halten, für die Ansprechbarkeit intakt ist.

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

Ändern Sie einfach die Stylings auf Ihre Bedürfnisse.

Answer 3

Sie können Position: absolut; oben: 100px; und links: 100px; in CSS auf Ihrem h1-Tag.