Heim > Artikel > Web-Frontend > So platzieren Sie Text in HTML auf der Bildoberfläche
So platzieren Sie Text in HTML auf der Bildoberfläche
- 青灯夜游Original
- 2021-02-22 11:36:2833008Durchsuche
So platzieren Sie Text auf der Oberfläche des Bildes in HTML: 1. Verwenden Sie „background-image“, um das Hintergrundbild zu definieren, 2. Verwenden Sie „img“, um das Bild zu definieren, und fügen Sie den img-Block und den Textblock ein das gleiche div; dann verwenden Sie das Positionsattribut, um die Position von Bildern und Text festzulegen. Absolute Positionierung und relative Positionierung können verwendet werden.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5- und CSS3-Version, Dell G3-Computer.
Methode 1: Verwenden Sie das Bild als Hintergrundbild, also: background-image:url("....");
Hier können Sie die horizontale und vertikale Kachelung des Hintergrundbilds steuern:
Hintergrundwiederholung: keine; Keine Kachelung
Hintergrundwiederholung: Wiederholung-x; Kachelung über die x-Achse
Hintergrundwiederholung: Wiederholung-y; Kachelung über die y-Achse Hintergrundwiederholung: Wiederholen; Platzieren Sie den Block und den Textblock im selben Div und legen Sie dann die Position zwischen ihnen fest.
- Zum Beispiel der folgende Codeblock:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> div{ width: 100%; height: 500px; background-image:url(demo/img/5.jpg); background-size:100%; background-repeat:no-repeat; color: red; font-size: 20px; } </style> </head> <body> <div> hello! </div> </body> </html>Der Rest der Position kann entsprechend angepasst werden zur tatsächlichen Situation~~
<div style="position:relative;"> <img src="...." / alt="So platzieren Sie Text in HTML auf der Bildoberfläche" > <div style="position:absolute; z-index:2; left:10px; top:10px"> haha </div> </div>
Über den Unterschied zwischen relativen und absoluten Attributwerten in Position: 
Position: absolut ist die absolute Positionierung; sie ist relativ zur Positionierung des Browsers . Zum Beispiel: Position: absolut; oben: 80px; dieser Container befindet sich immer 20px von der linken Seite des Browsers und 80px von der Oberseite des Browsers.
Position: relativ ist die relative Positionierung, die relativ zum vorherigen Container ist. Derzeit können Sie die Position „oben links“ nicht zur Positionierung verwenden. Es sollte eine Marge verwendet werden.
Zum Beispiel:
Wenn 1 eine feste Position hat. Der Stil von 1 ist float: left; height: 800px; der style von
2 ist float: left; rechts von 1, Abstand 120px
Programmiervideo! !
Das obige ist der detaillierte Inhalt vonSo platzieren Sie Text in HTML auf der Bildoberfläche. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!