


Ausführliche Erläuterung der Einstellung des Hintergrundbildattributs bei der Erstellung von html_HTML/Xhtml_Webseiten
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:

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen



Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.

Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.

Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.

Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.

Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.

Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele

Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.

Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.
