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
oderbody {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:
no-repeat: Das Hintergrundbild wird nicht gekachelt
repeat-x: Das Hintergrundbild wird nur horizontal gekacheltrepeat-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
:
(3), Steuerung der Hintergrundbildgröße:
Ich denke, viele Leute werden natürlich den folgenden Code verwenden:
Code kopieren
Haha, die Idee ist gut, aber unterstützt der von Ihnen verwendete Browser sie? Ich denke, IE oder FF werden es auf jeden Fall so behandeln, als ob sie es nicht gesehen hätten. Vielleicht fragen Sie sich: War das, als ich den Forumstil entworfen habe, realisierbar? Ich denke, wenn es nur der obige Code ist, kann er das Bild nicht steuern, da er nur die Größe des KÖRPERS steuert. Natürlich gibt es hier keine Kontrolle. Wenn es sich um andere ID-Tags handelt, denke ich, dass die Bereichsgröße des Tags gesteuert werden kann, haha, natürlich ist es nicht die Größe des Bildes.
Um ehrlich zu sein, stört dieses Problem nicht nur Sie, sondern auch mich. Denn es handelt sich lediglich um den Wert einer Immobilie, nicht um einen realen Gegenstand. Wenn Sie darüber nachdenken, CSS-Steuerung zu verwenden, denken Sie daran, es mir mitzuteilen.
Ergänzung: W3C hat am 10. September einen Artikel mit dem Titel „CSS Backgrounds and Borders Module Level 3“ veröffentlicht, der dem CSS-Hintergrund mehrere Attribute hinzufügt, die wir noch nie zuvor gesehen haben:
background-clip :
background-origin :
background-size :Hintergrundgröße.
Hintergrundpause:
Obwohl diese Attribute verfügbar sind, gibt es derzeit keine Browser, die sie unterstützen. Es ist so beunruhigend.
(4), Steuerung der Hintergrundbildposition:
Meine Abteilung hat das Hintergrundbild importiert, aber seine Position ist wirklich inakzeptabel. Weil es standardmäßig oben links ausgerichtet ist. Aber wir wollen es nicht so platzieren, was sollen wir also tun? Keine Sorge, der aufregende Moment kommt bald. Jetzt lernen wir Hintergrundposition, Hintergrundposition-x und Hintergrundposition-y kennen.
a. Grundlegende Grammatik:
Hintergrundposition : Länge ||. Position
Hintergrundposition-x : Länge | |. Mitte |. unten
b. Grammatikwert:
Länge: Prozentsatz |. Ein Längenwert, der aus einer Gleitkommazahl und einer Einheitenkennung besteht.
Position: oben |. unten | c. Beispiel:
Die folgenden drei Beispiele schreibe ich nur für die Werte der Länge oben |.
body { background-image: url("d:images
Nachdem ich so viele Beispiele genannt habe, denke ich, dass Sie ein gewisses Verständnis für die Positionierung haben.
(5), Transparenzeinstellung des Hintergrundbilds:
Manchmal möchten wir das Bild immer transparent einstellen.
(6). Einstellung mehrerer Hintergrundbilder:
Bezüglich der Einstellung mehrerer Hintergrundbilder habe ich es in „Beyond CSS: The Essence of WEB Design Art“ gesehen. Allerdings bedauere ich es sehr, denn die aktuellen Browser, die mehrere Hintergrundbilder in einem Label unterstützen, sind zu klein, und der einzige, den ich kenne, ist Apple Safari. Sie fragen sich vielleicht, wie das möglich ist. Nachdem Sie dieses Beispiel gelesen haben, werden Sie wahrscheinlich überrascht sein: „Oh mein Gott, vor CSS3 konnte man nur ein Bild für jedes Element verwenden.“ Wenn Sie es studieren möchten, installieren Sie schnell einen Safari-Browser. Für mich ist das der Trend. Mit einem Wort: Wer besser in der Lage ist, CSS zu interpretieren, wird zum Trend der Entwicklung werden. Wer über perfekte WEB-Standards verfügt, wird der Browser-Star von morgen sein.
Der Code lautet wie folgt:Kopieren Sie den Code
Der Code lautet wie folgt: