Brief Information

CSS-Versionen

Die Werte

url Der Wert ist der Pfad zur Grafikdatei, der in der url () -Konstruktion angegeben ist. In diesem Fall kann der Pfad zur Datei entweder in Anführungszeichen (doppelt oder einfach) oder ohne Anführungszeichen geschrieben werden. none Bricht das Hintergrundbild für das Element ab. erben Erbt den Wert vom übergeordneten Element.

HTML5 CSS2.1 IE Cr Op Sa Fx

Objektmodell

document.getElementById ("elementID") .style.backgroundImage

Browser

Internet Explorer 7.0 oder höher wendet einen Hintergrund auf die Innenseite des Rahmens eines Elements an, für das die Eigenschaft hasLayout festgelegt ist. Wenn das Element kein hasLayout hat, berücksichtigt die Hintergrundbildeigenschaft die in der Spezifikation angegebenen Rahmen des Elements. Der Unterschied in der Anzeige macht sich bemerkbar, wenn die Ränder gestrichelt oder gepunktet und nicht durchgehend sind.

Wenn das Element auf Scrollen oder Auto eingestellt ist, hat Internet Explorer 8 eine vertikale Verzögerung von einem Pixel, wenn der Hintergrund gescrollt wird.

Internet Explorer 7.0 oder höher unterstützt den geerbten Wert nicht.

Wenn der Hintergrund für eine Tabellenzeile (Tag) festgelegt ist ), dann zeigen Chrome, Safari, iOS es nicht wie in der Spezifikation vorgeschrieben an, nämlich für jede Zelle separat. Während der Browser einen soliden Hintergrund für die gesamte Zeile anzeigen sollte. Beispiel 2 zeigt einen Code, der den Fehler demonstriert.

HTML5 CSS2.1 IE Cr Op Sa Fx

1

2

3

Das Ergebnis dieses Beispiels im Chrome-Browser ist in Abb. 2 dargestellt. 1. Browser Internet Explorer, Opera und Firefox zeigen den Hintergrund für die Zeile korrekt an (Abb. 2).

Zahl: 1. Wiederholen Sie den Hintergrund für jede Zelle

Zahl: 2. Hintergrund für die gesamte Linie

Ich denke, es gibt keinen einzigen Ort, an dem die Immobilie nicht genutzt wird CSS-Hintergrund... Es scheint, dass was einfacher sein könnte als diese Eigenschaft? Aber nein, seine Fähigkeiten sind viel breiter als der übliche Zweck eines Bildes oder einer Farbe als Hintergrund einer Seite. Etwas wird bekannt sein, aber etwas wird sicherlich für viele zu einer Neuheit werden. In jedem Fall ist es hilfreich, genau zu wissen, wie der Hintergrund funktioniert.

CSS3 brachte viele neue Dinge in die Eigenschaft, einschließlich Transparenz und Zuweisung mehrerer Bilder als Hintergrund. Wir werden jedoch weiter unten darauf eingehen und zunächst die Grundlagen der Eigenschaft betrachten. hintergrund.

hintergrundfarbe

Ich bin mir ziemlich sicher, dass Sie schon oft Hintergrundfarben zugewiesen haben. Dies kann mit verschiedenen Notationstypen erfolgen: regulär (Farbname wird verwendet), hexadezimal oder RGB-Notation. Jeder Typ ist gleich, verwenden Sie, was Ihnen am besten gefällt. Ich versuche, die kürzeste Version zu verwenden, und für die Wahrnehmung ist es einfacher und die Stildatei ist etwas kleiner.

P (Hintergrundfarbe: rot;) p (Hintergrundfarbe: # f00;) p (Hintergrundfarbe: # ff0000;) p (Hintergrundfarbe: rgb (255, 0, 0;))

CSS3 bietet Transparenzunterstützung, sodass Sie es unserer Farbe hinzufügen können, zum Beispiel:

P (Hintergrundfarbe: rgba (255, 0, 0, 0,5);)

Die letzte Ziffer wurde auf 50% Transparenz eingestellt. Sie können den Transparenzwert von 0 (vollständig transparenter Hintergrund) bis 1 (vollständig undurchsichtig) einstellen.

hintergrundbild

Diese Eigenschaft wird auch sehr oft verwendet. Sie ermöglicht es Ihnen, dem Hintergrund ein Bild zuzuweisen. CSS3 bietet die Möglichkeit, dem Hintergrund mehrere Bilder zuzuweisen, von denen jedes eine Art Ebene bildet, sodass jedes nachfolgende dem vorherigen überlagert wird. Warum könnte dies nützlich sein? Alles ist ganz einfach - nehmen wir an, Sie müssen die kleinen Dinge in jeder Ecke der Site befestigen. Bei einem mehr oder weniger flüssigen Layout ist die Verwendung eines Bildes keine Option. Deshalb machen wir 4 "Ebenen", wir verschieben jedes Bild in eine eigene Ecke und das wars, das Problem ist gelöst

Körper (Hintergrundbild: URL ("Bild1"), URL ("Bild2"), URL ("Bild3"))

Wenn Sie dem Hintergrund ein Bild zuweisen müssen, belassen wir nur das erste im Code. Ich halte dies für verständlich.
Bei der Verwendung eines Bildes als Hintergrund sind zwei Regeln zu beachten:

• stellen Sie eine kontrastierende Hintergrundfarbe ein, falls der Benutzer aus irgendeinem Grund kein Bild anzeigen kann. Es kann die Anzeige von Bildern kitschig ausschalten, spart Verkehr.
• verwenden Sie kein Hintergrundbild, um wichtige Informationen zu übermitteln. Aus dem oben genannten Grund kann es sein, dass der Benutzer es nicht sieht.

Die Unterstützung für mehrere Hintergrundbilder ist breit genug. Alle Browser, auch IE8, unterstützen diese Eigenschaft.

hintergrundbild: | keiner; hintergrundbild: | Keine | erben; hintergrundbild: <фн-изображение> [ , <фн-изображение> ]*; <фн-изображение> = | keiner

Beschreibung

Hintergrundbild-Eigenschaft (aus dem englischen "Hintergrundbild" - "Hintergrundbild") legt das Hintergrundbild eines Elements fest.

Hinweis

Wenn Sie ein Hintergrundbild festlegen, sollten Sie auch die Hintergrundfarbe angeben, die verwendet wird, wenn das Bild nicht verfügbar ist. Wenn ein Bild verfügbar ist, wird es über der Hintergrundfarbe angezeigt. (Auf diese Weise wird die Farbe in den transparenten Teilen des Bildes sichtbar).

Nutzungsbedingungen

Beginnend mit CSS3 (durch Kommas getrennt) können Sie mehrere Hintergrundbilder gleichzeitig angeben. Dadurch werden die unteren Hintergrundbilder durch die transparenten Bereiche der oberen Hintergrundbilder sichtbar.

JavaScript

[Objekt] .style .backgroundImage \u003d "[Wert]";

Browser-Unterstützung

Spezifikation

Die Werte

Alle Werte CSS 1 CSS 2.0 CSS 2.1 CSS 2.2 CSS 3

Keine Zeigt kein Hintergrundbild an. URL ( ) Gibt die Bild-URI-Zeichenfolge in "url (...)" an.

hintergrundbild: URL (myImage.png);

URL (" ") Gibt eine Bild-URI-Zeichenfolge innerhalb von" url (...) "an, und die URI-Zeichenfolge wird mit DOUBLE QUOTE" "-Zeichen gekennzeichnet.

hintergrundbild: URL ("myImage.png");

Erben Gibt an, dass das Element die Parameter des übergeordneten Elements erben soll.

Ursprünglicher Wert: "Keiner".

Anwendungsbeispiel

Codeauflistung

Hintergrundbild

Dokument mit mehreren Hintergrundbildern.

> Hintergrundbild-Eigenschaft>

Das Design der Website beginnt mit einem Hintergrund.

Es ist richtig, die Hintergrundfarbe - Eigenschaft zu registrieren hintergrundfarbe, für Sicherheitsnetz, wenn das Bild nicht geladen wird. In Klammern url () Geben Sie den Pfad zum Ordner mit den Bildern an.

Standardmäßig wiederholt sich das Bild wie eine "Kachel", bis es den gesamten Browserbildschirm ausfüllt, während wir die Seite nach unten bewegen. Unsere "Kachel" füllt sowohl den zweiten als auch den dritten Bildschirm aus, solange der Seiteninhalt endet. Es ist klar, dass ein solches Ergebnis nicht die Höhe des Designgedankens ist, und wir werden kein "Badezimmer" haben, sondern nur einen Blog, in dem Lesbarkeit ein sehr wichtiger Punkt ist.

Eine einfache Möglichkeit, die "Kacheln" zu entfernen, besteht darin, ein großes Bild mit einer Breite von mindestens 1024 Pixel zu verwenden, damit es den gesamten Bildschirm ausfüllt. Es ist auch eine gute Lösung, eine nahtlose Textur zu finden. Wenn sie multipliziert wird, ist das Bild ein Ganzes.

Wie kann der Hintergrund attraktiver gestaltet werden?

Gott sei Dank haben wir Helfer dafür:

• keine Wiederholung - Wiederholung deaktivieren
• wiederhole-x - Wiederholung des Musters nur horizontal
• wiederhole-y - Wiederholung des Musters nur vertikal

Zum Beispiel:

Blog-Header

Dies ist eine Hintergrundtextur, die sich nur horizontal wiederholt.

Der nächste Helfer ist Eigentum hintergrundpositionMit dieser Option können Sie das Hintergrundbild an einer beliebigen Stelle auf dem Bildschirm positionieren. Diese Technik ist im modernen Webdesign weit verbreitet. Wir haben ein Bild, aber es ist nicht Teil des Inhalts, sondern dient nur als Dekoration für die Website.

Titel

Ein Beispiel für einen sich nicht wiederholenden Hintergrund mit einer bestimmten Positionierung.

Das Bild wird nur einmal angezeigt und befindet sich rechts.

Der Einzug vom rechten Rand ist auf 200 px eingestellt, um eine Kollision des Textes mit dem Hintergrund zu vermeiden.

Wenn das Bild beim Scrollen auf dem Bildschirm immer sichtbar sein soll, müssen wir die Eigenschaft dem obigen Code hinzufügen - hintergrund-Anhang: behoben;

Was ist der Unterschied zwischen img und hintergrundbild?

Der Unterschied ist grundlegend, Tag img direkt in den Körper eingeführt Html-Seiten und ist verantwortlich für den Inhalt (Illustrationen, Fotografien, Avatare), trägt eine semantische Last. Es ist sehr wichtig, dass das Bild von Suchmaschinen indiziert wird und in die Suchergebnisse gelangt. Eigenschaften CSS Hintergrundbild - die Site einzigartig und schön machen, dh dieses Design, das in eine externe Datei aufgenommen werden sollte CSS Stile oder Verwendung innerhalb eines Elements stil.

Das heißt natürlich nicht hintergrundbild funktioniert nicht, wenn es in den Körper gelegt wird Html-Seiten. Ich empfehle jedoch dringend, alles, was mit Design zu tun hat, herauszunehmen CSS... Als Ergebnis bekommen wir eine saubere Html-der Code:

• dies wirkt sich positiv auf die Indizierung der Website aus. Such-Bots werden Ihre Website lieben und sie häufiger besuchen.
• ihre Besucher werden auch zufrieden sein, die Website wird aufgrund ihres geringen Gewichts schneller geladen.
• als Webmaster fällt es Ihnen leichter, mit sauberem Code zu arbeiten.

Nun, wir haben mehr oder weniger alle Optionen in Betracht gezogen, die die Eigenschaft nutzen CSS Hintergrundbild... Mehr Übungsfreunde! Fühlen Sie sich frei, den Code zu kopieren und Ihre eigenen Optionen zu finden!