Heim > Web-Frontend > HTML-Tutorial > Ausführliche Erläuterung der Einstellung des Hintergrundbildattributs bei der Erstellung von html_HTML/Xhtml_Webseiten

Ausführliche Erläuterung der Einstellung des Hintergrundbildattributs bei der Erstellung von html_HTML/Xhtml_Webseiten

WBOY
Freigeben: 2016-05-16 16:36:22
Original
1773 Leute haben es durchsucht

Bei Bildern denken wir zuerst an das Hintergrundbild. Denn viele unserer Dekorationen werden mithilfe von Hintergrundbildern umgesetzt. Beginnen wir in diesem Fall mit der Steuerung des Hintergrundbilds mit CSS.

Definition und Verwendung

Das Attribut „Hintergrundbild“ legt das Hintergrundbild für das Element fest.

Der Hintergrund des

-Elements nimmt die gesamte Größe des Elements ein, einschließlich Abstand und Ränder, jedoch keine Ränder.

Standardmäßig wird das Hintergrundbild in der oberen linken Ecke des Elements platziert und wiederholt sich horizontal und vertikal.

1. CSS-Steuerelement-Hintergrundbild:

Wenn wir mit dem Entwerfen einer Webseite beginnen, denken wir möglicherweise nicht zu viel darüber nach, was das Hintergrundbild ist, da die meisten von ihnen meiner Meinung nach nur die Hintergrundfarbe entwerfen Vordergrund. Genau wie Musik hat es einen gewissen Einfluss auf die Geschwindigkeit, mit der eine Webseite geöffnet wird. Für eine allgemeine persönliche Website oder einen persönlichen Blog ist es jedoch natürlich unerlässlich, die eigene Persönlichkeit zu zeigen. Das heißt, wenn das Bild nicht verfügbar ist Ersatzinhalte werden nicht angezeigt. Es wird daher nicht empfohlen, CSS-Hintergrundbilder für Navigationsschaltflächentexte oder ähnliche Situationen zu verwenden.
Es gibt viele CSS-Eigenschaften zum Steuern von Hintergrundbildern. Solange sie sich auf das Bild beziehen, werden die meisten davon verwendet.

(1). Import von Hintergrundbildern:

Die bekanntesten sind natürlich „Hintergrund“ und „Hintergrundbild“.
Der Code zum Entwerfen von Hintergrundbildern für Webseiten lautet:

body {background:url("d:images

oder

body {background-image:url("d:images


(2) So zeigen Sie das Hintergrundbild an:

Natürlich können Sie den gewünschten Effekt nicht einfach durch die Verwendung des obigen Codes erzielen. Denn wenn das Bild klein ist, wird es gekachelt. Wenn es groß ist, werden Bildlaufleisten angezeigt, um es anzuzeigen, was nicht gut ist. Daher müssen wir mehr Anzeigesteuerung durchführen, das heißt, wir müssen die Hintergrundwiederholung verwenden Es ist der Wert:

Wiederholen: Standardwert. Das Hintergrundbild wird sowohl vertikal als auch horizontal gekachelt

no-repeat: Das Hintergrundbild wird nicht gekachelt

repeat-x: Das Hintergrundbild wird nur horizontal gekachelt

repeat-y: Das Hintergrundbild wird nur vertikal gekachelt

Was den Code betrifft, denke ich, dass jeder, der ein wenig CSS kennt, ihn wie folgt kennen wird
:

body {background:url("d:images


(3), Steuerung der Hintergrundbildgröße:

Aber das Problem ist, was ist, wenn das Bild zu groß ist? Für eine gute Webseite ist es am besten, keine zu großen Bilder zu verwenden, da dies aus den oben genannten Gründen die Geschwindigkeit beim Öffnen der Webseite beeinträchtigt. Für die Verarbeitung nutzen wir besser PS oder FireWorks. Aber da ich es erwähnt habe, möchten wir CSS nicht verwenden, um die Bildgröße zu steuern.

Ich denke, viele Leute werden natürlich den folgenden Code verwenden:


Code kopieren

Der Code lautet wie folgt: