Wie kann ich ein Textfeld oben auf ein Foto integrieren?

October 7

Eines der Geheimnisse zu machen Elemente irgendwo auf einer Webseite erscheinen ist wissen, wie effektiv mithilfe von Cascading Style Sheets. CSS, hat zum Beispiel eine handliche "Background-Image"-Eigenschaft, die Websitedesigner verwenden, um Webseiten fotografischen Hintergründe hinzufügen. Diese Eigenschaft können Sie auch andere Seitenelemente wie Div Container Hintergrund Fotos hinzufügen. Wenn Sie ein Textfeld auf einem Foto einbetten möchten, platzieren Sie das Textfeld in einem Div und geben Sie dem DIV-Tag einen "Background-Image"-Wert. Dann werden die Besucher der Website können Informationen in das Textfeld eingeben, auch wenn dahinter ein Foto erscheint.

Anweisungen

1 Öffnen Sie Ihre HTML-Seiten mit Notepad oder einem HTML-Editor.

2 Fügen Sie den folgenden HTML-Code zum Body-Abschnitt der Seite:

< Div Class = "container1" >

< Div Class = "textbox1" >

< Eingabe-Id = "Text1" Type = "Text" / >

< / Div >

< / Div >

Dadurch wird die Seite ein Div hinzugefügt. Dieses Div verweist eine CSS-Klasse mit dem Namen "container1." Das div-Tag enthält einen div. Dieses Div verweist eine CSS-Klasse mit dem Namen "textbox1." Dieses Div enthält auch ein Textfeld.

3 Fügen Sie diesen Code in den Head-Abschnitt der Seite:

< Typ style = "Text/Css" >

.Container1 {-Hintergrundbild: URL('xyz.jpg'); Background-Repeat: No-wiederholen;

Höhe: 200px; Breite: 300px;

}

.textBox1 {Margin-Top: 0px; Margin-Left: 0px;}

< / style >

Dieses Stylesheet-Deklaration definiert die "container1" und "textbox1" Klassen, die im vorherigen Schritt beschrieben. Klasse "container1" verfügt über ein Attribut "Background-Image". Der Wert dieses Attributs "URL" ist "xyz.jpg." Ersetzen Sie "xyz.jpg" durch den Namen einer Bilddatei auf Ihrem Computer. Ersetzen Sie "200px" mit des Bilds Pixelhöhe. Ersetzen Sie "300px" mit des Bilds Pixelbreite.

Beachten Sie die Klassendefinition "textbox1". Es hat "Margin-Top" und "Margin-Left"-Attribute. Diese Attribute sagen Browser wo das Textfeld in Bezug auf das Foto oben linken Rand platziert. Da beide Attribute der Wert NULL in diesem Beispiel ist, wird das Textfeld das Foto oben linken Rand angezeigt werden.

4 Speichern Sie die Seite, und zeigen Sie es in Ihrem Browser. Der Browser zeigt das Textfeld in der linken oberen Ecke des Fotos.

5 Zurück zum HTML-Dokument im Editor, und suchen Sie diese Klassendefinition:

.textBox1 {Margin-Top: 0px; Margin-Left: 0px;}

Löschen Sie diese Zeile, und ersetzen Sie es mit der folgenden Zeile:

.textBox1 {Marge-oben: 40px; Margin-Left: 50px;}

Dadurch ändert sich das Textfeld am oberen Rand auf 40 Pixel und seiner linken Seitenrand auf 50 Pixel.

6 Speichern Sie die Seite erneut, und zeigen Sie es in Ihrem Browser. Das Textfeld wird in einer anderen Lage über dem Foto angezeigt. Die Oberkante ist 40 Pixel vom oberen Rand das Foto und 50 Pixel vom linken Rand des Fotos. Beachten Sie, dass Sie das Textfeld noch sehen können, auch wenn sie keinen Text enthält. Das Foto im Hintergrund beeinflusst nicht das Textfeld aussehen.

Tipps & Warnungen

  • Die Möglichkeit, das Textfeld Steuern des oberen und linken Ränder können Sie das Textfeld an jedem beliebigen Ort über das Foto angezeigt werden. Experimentieren Sie mit unterschiedlichen Werten von "Margin-Top" und "Margin-Left." Sehen Sie, wie Ihre Änderungen an diesen Werten verursachen das Textfeld an verschiedenen Positionen über dem Foto angezeigt werden.
  • Wenn Sie nicht die Pixelhöhe und Breite Ihr Foto kennen, finden Sie diese Werte mithilfe von Windows Explorer. Starten Sie Windows Explorer, suchen Sie Ihre Bilddatei, und mit der rechten Maustaste darauf, um ein Menü anzuzeigen. Klicken Sie auf "Eigenschaften", und klicken Sie auf "Details." Das Foto-Breite und Höhe-Bemaßungen werden auf dieser Registerkarte.

SIE KÖNNEN AUCH GERNE