div CSS-Hintergrund Hintergrund

Hintergrundattribut – Hintergrund ist das Kernattribut in CSS. Sie sollten ein gutes Verständnis davon haben. In diesem Artikel werden alle zugehörigen Eigenschaften des Hintergrunds ausführlich erläutert, sogar der Hintergrundanhang, und er stellt uns vor, wie er im kommenden CSS3 aussehen wird, sowie die neu hinzugefügten Hintergrundeigenschaften.

Verwendung der Hintergrundeigenschaften in CSS2

Überprüfung

Es gibt fünf hintergrundbezogene Eigenschaften in CSS2. Dies sind:

Hintergrundfarbe: Die Farbe, die den Hintergrund vollständig ausfüllt -Position: OK Die Position des Hintergrundbilds

Hintergrundwiederholung: Bestimmen Sie, ob der Hintergrund Bild wird wiederholt angeordnet

Hintergrundanhang: Bestimmen Sie, ob das Hintergrundbild mit der Seite scrollt

Diese Eigenschaften können in einer einfachen Eigenschaft geschrieben werden: Hintergrund. Es muss darauf hingewiesen werden, dass der Hintergrund für den Hintergrund des Inhaltsteils des Elements verantwortlich ist, einschließlich Polsterung und Rand, nicht jedoch für den Rand. So wird es in Firefox, Safari und Opera sowie IE8 gehandhabt. Allerdings sind Grenzen im IE7 und im verdammten IE6 nicht enthalten, und der Unterschied ist wie im Bildbeispiel unten dargestellt.

In IE7 und IE6 enthält der Hintergrund keinen Rahmen.

Basisattribut

Hintergrundfarbattribut

Hintergrundfarbe wird verwendet Zur Beschreibung: Legen Sie die Farbe des Füllhintergrunds fest. Es gibt mehrere Möglichkeiten, die Farbe der Füllung zu definieren. Die folgenden Methoden sind äquivalent:

Hintergrundfarbe: Blau;

Hintergrundfarbe: rgb(0, 0, 255); 🎜>

Hintergrundfarbe: #0000ff;

Hintergrundfarbe kann auch auf transparent gesetzt werden, sodass die darunter liegenden Elemente angezeigt werden können.

Hintergrundbildeigenschaft

Hintergrundbild ermöglicht es Ihnen, Ihr eigenes Bild als Hintergrund zu verwenden. Es hängt eng mit der Hintergrundfarbe zusammen. Sobald Ihr Bild nicht groß genug ist, um den gesamten Elementhintergrund zu kacheln, wird im leeren Teil die durch Hintergrundfarbe festgelegte Farbe angezeigt. Es ist extrem einfach zu verwenden, aber Sie müssen sich die Positionsbeziehung zwischen dem Bild und der CSS-Datei merken:

background-image: url(image.jpg);

Wenn das Bild in ist den Ordner, schreiben Sie es so, alle verwenden relative Pfade:

background-image: url(images/image.jpg);

Hintergrundwiederholungsattribut

Standardmäßig wird Ihr Bild horizontal und vertikal wiederholt, bis es das gesamte Element ausfüllt. Aber manchmal möchten Sie vielleicht nur in eine Richtung wiederholen. Dann stellen Sie es so ein:

background-repeat: repeat; /* Standardwert wird in alle Richtungen wiederholt*/

background-repeat: no-repeat; Wiederholung. Es erscheint nur ein Bild*/

Hintergrundwiederholung: Wiederholung-x; /* Horizontale Wiederholungsausbreitung*/

Hintergrundwiederholung: Wiederholung-y; /* Vertikale Wiederholungsausbreitung*/

background-repeat: inherit; /* Verwenden Sie den Attributwert „background-repeat“ des übergeordneten Elements */

Attribut „Hintergrundposition“

Das Attribut „Hintergrundposition“ steuert das Hintergrundbild auf der Elementposition in. Der Schlüssel zum Mastering liegt darin, dass die Hintergrundposition die obere linke Ecke des Bildes ist.

Das Folgende ist eine Demonstration der Eigenschaft „Hintergrundposition“. Natürlich setzen wir das Attribut „background-repeat“ auf „no-repeat“.

/* Beispiel 1: */

background-position: 0 0; /* d. h. die obere linke Ecke des Elements 2: Nach rechts verschieben. */

Hintergrundposition: 75px 0;

/* Beispiel 3: Nach links verschieben */

Hintergrundposition : -75px 0;

/* Beispiel 4: Nach unten verschieben */

Hintergrundposition: 0 100px;

Sie können die festlegen Position des Hintergrundbilds nach Belieben

Die Eigenschaft „Hintergrundposition“ kann auch in Einheiten wie Schlüsselwörtern, Prozentsätzen usw. funktionieren. Sie muss nicht genau in Pixeln (px) angegeben werden.

Schlüsselwörter werden sehr häufig verwendet, in horizontaler Richtung:

links

Mitte

rechts

In vertikaler Richtung:

oben

Mitte

unten

Verwenden Sie sie wie zuvor:

Hintergrundposition: oben rechts;

Prozentsatz wird auf die gleiche Weise verwendet:

Hintergrundposition: 100 % 50 %;

Der Effekt ist so:

Das Smiley-Gesichtsbild wird in die Mitte der rechten Seite des Elements gesetzt

Hintergrundanhangsattribut

Der Hintergrund- Das Anhangsattribut definiert, was mit dem Hintergrundbild passiert, wenn der Benutzer auf der Seite scrollt. Was. Es gibt drei mögliche Werte: Scroll, Fixed und Inherit erbt weiterhin die Einstellungen seines übergeordneten Elements, um das Attribut „background-attachment“ vollständig zu verstehen. Zunächst müssen Sie herausfinden, was mit der Webseite passiert, wenn der Benutzer auf der Seite scrollt. Wenn Sie den Wert auf „Fixed“ festlegen, wird beim Herunterscrollen auf der Seite der Inhalt nach unten gescrollt, der Hintergrund jedoch nicht mit. Das Ergebnis ist, als würde der Inhalt nach oben scrollen. Wenn Sie den Wert auf „Scrollen“ einstellen, wird natürlich auch der Hintergrund gescrollt.

Sehen wir uns unten ein Beispiel an:

background-image: url(test-image.jpg);

background-position: 0 0;

background-repeat: no-repeat;

background-attachment: scroll;

Wenn wir auf der Seite nach unten scrollen, scrollt das Hintergrundbild nach oben, bis es erreicht ist verschwindet.

Sehen Sie sich ein anderes festes Beispiel an:

background-image: url(test-image.jpg);

background-position: 0 100 % ;

Hintergrundwiederholung: keine Wiederholung;

Hintergrundanhang: behoben;

Scrollen Sie auf der Seite nach unten, das Hintergrundbild ist immer noch sichtbar.

Es ist zu beachten, dass das Hintergrundbild nur innerhalb seines Elements verschoben werden kann. Hier ist ein Beispiel:

background-image: url(test-image.jpg);

Hintergrundposition: 0 100 %;

Hintergrundwiederholung: keine Wiederholung;

Hintergrundanhang: fest;

Einige Bilder sind verschwunden, weil sie außerhalb der Elementgrenze liegen.

Einfaches Hintergrundattribut

Wir können diese Attributeinstellungen in ein Attribut schreiben:

Hintergrund:

Hintergrund- Farbe: transparent;

Hintergrundbild: url(image.jpg);

Hintergrundposition: 50% 0 ;

Hintergrundanhang: scrollen;

Hintergrund -Wiederholung: Wiederholung-y;

... kann geschrieben werden als:

Hintergrund: transparente URL (Bild.jpg) 50 % 0 Scroll-Wiederholung;

Und Sie müssen nicht jeden Wert festlegen. Wenn Sie es nicht schreiben, wird der Standardwert verwendet. Daher kann das Obige auch so geschrieben werden:

Hintergrund: url(image.jpg) 50% 0 Wiederholungs-y;

„Unkonventionelle“ Anwendung des Hintergrunds

Hintergrund: Immobilien bieten nicht nur Verschönerungselemente, sondern auch vielfältige unkonventionelle Nutzungsmöglichkeiten.

Faux Columns

Bei Verwendung des Float-Attributlayouts kann es schwierig sein, sicherzustellen, dass die Länge zweier Spalten gleich ist. Wenn die beiden Elemente unterschiedlich groß sind, wird das Hintergrundbild durcheinander gebracht. Künstliche Säulen sind eine einfache Lösung, die erstmals auf A List Apart veröffentlicht wurde.

Um es einfach auszudrücken: Legen Sie im übergeordneten Element ein allgemeines Hintergrundbild fest, und die Position der vertikalen Zeilen im Bild stimmt genau mit der tatsächlichen Position der Trennung überein.

Textersetzung

Die Auswahl an Schriftarten im Web ist gering. Unsere übliche Methode besteht darin, Bilder aus Texten zu erstellen, aber dies allein ist für Suchmaschinen nicht geeignet. Eine beliebte Methode hierfür ist die Verwendung des Hintergrundattributs, um das Bild des Texts anzuzeigen und den darüber liegenden Text auszublenden. Dadurch ist es für Suchmaschinen und Screenreader geeignet und Sie können coole Schriftarten im Browser sehen.

Textinformationen werden beispielsweise so geschrieben:

Blogroll

Wenn das Textbild 200 Pixel breit ist und 75px hoch. Dann verwenden wir den folgenden CSS-Code, um das gesamte Bild anzuzeigen:

h3.blogroll {

width: 200px; /* to das gesamte Bild anzeigen. */

background:url(blogroll-text.jpg) 0 0 no-repeat; * Text nach links verschieben 9999px, um Text auszublenden*/

}

Einfachere Aufzählungspunkte

Der Standardstil der Option für ungeordnete Listen sieht möglicherweise nicht so gut aus. Dann verwenden wir Hintergrundbilder, um sie schöner aussehen zu lassen:

ul {

list-style: none; /* Entfernen Sie den Standardstil */

ul li {

padding-left: 40px; /* Verschiebe den Inhalt nach innen, um Platz für den Hintergrund zu lassen */

background: url(bulletpoint.jpg) 0 0 nein -repeat;

}

Hintergrundeigenschaften in CSS3

Es gibt viele Änderungen an den Hintergrundeigenschaften in CSS3. Am offensichtlichsten ist die Unterstützung mehrerer Hintergrundbilder sowie vier neuer Attribute und Änderungen an vorhandenen Attributen.

Mehrere Hintergrundbilder

Mit CSS3 können Sie mehr als ein Hintergrundbild für ein Element verwenden. Der Code ist der gleiche wie in CSS2, Sie können mehrere Bilder durch Kommas trennen. Das erste deklarierte Bild wird oben im Element angezeigt, etwa so:

Hintergrundbild: url(top-image.jpg), url(middle-image.jpg), url(bottom-image. jpg);

Neues Attribut 1: Hintergrundclip

Dieses Attribut bringt uns zurück zur ursprünglichen Frage zu den Rand- und Hintergrundattributen. Mit dem Attribut

background-clip können Sie steuern, wo Ihr Hintergrund angezeigt wird:

background-clip: border-box;

background innerhalb des Rand wird genauso angezeigt wie jetzt. .

background-clip: padding-box;

Hintergründe werden in Padding statt im Rahmen angezeigt, was dem IE6 entspricht.

Hintergrundclip: Inhaltsbox;

Hintergründe werden nur innerhalb des Inhalts angezeigt, nicht um Rahmen oder Innenabstand.

background-clip: no-clip;

Standardwert, derselbe wie border-box.

Neues Attribut 2: Hintergrundursprung

Dieses Attribut muss zusammen mit dem Hintergrundpositionsattribut verwendet werden. Sie können die Art und Weise ändern, wie die Hintergrundposition berechnet wird (genau wie der Hintergrundclip).

Hintergrundursprung: Rahmenbox;

Hintergrundposition beginnt am Rand berechnen.

background-origin: padding-box;

background-position wird aus padding berechnet.

background-origin: content-box;

background-position wird aus dem Inhalt berechnet.

Beispiele für die Anwendung der Eigenschaften „background-clip“ und „background-origin“ finden Sie unter CSS3.info.

Neue Eigenschaft 3: Hintergrundgröße

background- size-Eigenschaft Wird verwendet, um die Größe Ihres Hintergrundbilds zu ändern. Mögliche Werte sind:

background-size: include;

Bild verkleinern, um es an die Elementgröße anzupassen.

background-size: cover;

Erweitern Sie das Bild, um es an die Elementgröße anzupassen.

Hintergrundgröße: 100px 100px;

Größe neu definieren.

Hintergrundgröße: 50 % 100 %;

Mit Prozentsatz neu definieren.

Sie können sich das Beispiel ansehen: CSS 3-Spezifikationen

Neues Attribut 4: Hintergrundunterbrechung

In CSS 3 können Elemente geteilt werden in mehrere Teile aufteilen (z. B. kann das Inline-Element span mehrere Zeilen belegen). Die Eigenschaft „background-break“ steuert, wie das Hintergrundbild über mehrere Abschnitte hinweg angezeigt wird.

Mögliche Werte sind:

Background-break: kontinuierlich;Standardwert

Background-break: Bounding-Box;: zwischen zwei Teilen Der Mehrwert wird berücksichtigt.

Background-break: every-box;: Jeder Abschnitt wird einzeln betrachtet.

Änderungen am Attribut „Hintergrundfarbe“

Das Attribut „Hintergrundfarbe“ in CSS3 unterstützt Vordergrund- und Hintergrundfarben: Hintergrundfarbe: grün / blau;

In diesem Beispiel ist die Standardfarbe Grün. Wenn sie nicht angezeigt werden kann, verwenden Sie Blau.

Änderungen am Attribut „Hintergrundwiederholung“

Erinnern Sie sich noch daran, dass in CSS 2 Bilder teilweise verschwinden können, wenn die Grenze überschritten wird? CSS 3 hat zwei neue mögliche Werte, um dieses Problem zu lösen:

space: Legt den Abstand zwischen wiederholten Bildern fest.

rund: Die Größe des sich wiederholenden Bildes wird automatisch angepasst, um das Element genau auszufüllen.

Hintergrundwiederholung: Leerzeichen Beispiel: CSS 3-Spezifikationen.

Änderungen der Hintergrundanhangseigenschaft

Hintergrundanhang hat einen neuen möglichen Wert: lokal. Es hängt mit scrollbaren Elementen zusammen (z. B. mit dem Attribut overflow: scroll;). Wenn der Wert für den Hintergrundanhang scroll ist, wird das Hintergrundbild nicht mit dem Inhalt gescrollt. Mit „background-attachment:local“ können Bilder jetzt mit dem Inhalt scrollen