Wie Sie Text auf einer Webseite über Bilder legen
Verwendung von Cascading Style Sheets (CSS) können Sie Bilder und Texte platzieren wo immer Sie auf Webseiten wollen. Eine CSS-Eigenschaft-die Z Index - macht es möglich, sogar die Reihenfolge der Elemente auf einer Webseite ändern, so dass der Text über ein Bild gehen kann. Positionierung von Bildern und Text mit CSS braucht einige Übung, aber mehr fortgeschrittene Programmierer können komplizierte und wunderschöne Designs unter Ausnutzung aller CSS-Angebote erstellen.
Anweisungen
Den HTML-Code bearbeiten
1 Öffnen Sie eine Webseite in einem Code-Editor wie Notepad++, jEdit oder BBEdit. Suchen Sie das < Img >-Tag, der dem gewünschten Text legen über Bild zugeordnet. < Img >-Tag sieht wie folgt aus:
< Img / >
2 Hinzufügen einer neuen Zeile über dem < Img >-Tag, und fügen Sie dann ein Starttag < Div >. Fügen Sie eine neue Zeile unterhalb der < Img >-Tag und der Typ in dem schließenden < / Div > Tag. Legen Sie in dem Starttag < Div > das Attribut "ID" auf einen eindeutige und aussagekräftige Namen. Der resultierende Code wird wie folgt aussehen:
< Div Id = "Wrapper" >
< Img / >
< / Div >
3 Fügen Sie eine leere Zeile unterhalb der < Img > Tag und Typ in den öffnenden und schließenden < Div > Tags wieder. Geben Sie den Text zwischen diesen Tags. Geben Sie dem < Div > am Anfang des Textes ein Attribut "ID" mit einem einzigartigen und aussagekräftige Namen. Hier ist ein Beispiel für die resultierende Code:
< Div Id = "Wrapper" >
< Img / >
< Div Id = "Bild-Text" > hier ist der Text zu gehen über das Bild. < / Div >
< / Div >
Fügen Sie einige CSS-Code
4 Offen Ihre. CSS-Datei, wenn die Webseite eine verwendet. Wenn Ihre Webseite keine CSS-Datei verwendet, oder wenn Sie nicht sicher sind, führen Sie einen Bildlauf bis zu den < Head >-Tags und < Stil > und < / style > Markierungen. Ort CSS entweder in Code der. CSS-Datei oder zwischen den < Style >-Tags.
5 Geben Sie den folgenden CSS-Code:
Wrapper {Position: relative;} Wrapper-Img {Position: absolute;} Bild-Text {Position: absolute;} Der obige Code setzt Positionierung Typen auf die Umhüllung < Div >-Tags als auch Bild und Text dazwischen. Durch Festlegen des Wrappers < Div > relative Positionierung verwenden, können wir absolute Positionierung auf seine verschachtelte Tags ohne das Bild und Text geht auf der Web-Seite ganz oben. Sie können sie stattdessen innerhalb der Verpackung < Div > positionieren.
6 Ihr Bild und Text die Z-Index-Eigenschaft hinzufügen. Diese Eigenschaft bestimmt die Stapelreihenfolge von HTML-Elementen. Elemente erhielten die höchsten Nummern erscheinen zuerst auf der Seite, und Elemente, die niedrigere Z-Index-Nummern gehen unter ihnen.
Wrapper-Img {Position: Absolute; Z-Index: 0;} Bild-Text {Position: Absolute; Z-Index: 1;} Der obige Code setzt den Text über dem Bild. Vermeiden Sie mit negativen Zahlen für Z-Index oder mit sehr großen Zahlen.
7 Steuern Sie die genaue Platzierung der absolut positionierte Elemente - in diesem Fall das Bild und Text - mithilfe der "oberen" und "linken" CSS-Eigenschaften. Die genauen Zahlen verwendet, hängt die Größe des Bilds und wie den Text angezeigt werden soll. Hier ist ein Beispiel des Textes über die linke obere Ecke des Bildes positioniert:
Wrapper-Img {Position: absolute; Top: 0px; Links: 0px; Z-Index: 0;} Bild-Text {Position: absolute; Top: 0px; Links: 0px; Z-Index: 1;}
Tipps & Warnungen
- Lernen Sie das CSS-Box-Modell, innen und außen. Dies hilft Ihnen ein besseres Verständnis der CSS-Positionierung zu erhalten.
- Testen Sie Ihre Webseite in Internet Explorer 8 und unter Wenn Sie besorgt sind wie Ihre Web-Seiten werden an Benutzer älterer IE-Browser. Internet Explorer 6 bis 8 enthält viele CSS-bezogene Fehler.