Arbeiten mit CSS3-Hintergrundbildern

Dieses Segment der CSS3-Serie konzentriert sich auf Bilder, insbesondere auf CSS3-Hintergrundbilder, die heute in vielen Browsern implementiert werden können. Schauen Sie sich die vorherigen Beiträge in der CSS3-Serie an:

  • Schauen Sie sich zunächst die CSS3-Webdesignelemente an, die sich auf die verschiedenen Module, CSS3-Anzeigeregeln, Browserpräfixe, Verläufe, Tabellen und Schriftarten konzentrierten.
  • CSS3-Ressourcenüberprüfung: CSS3.info, eine CSS3-Ressourcenüberprüfung der Website CSS3.info.
  • Arbeiten mit dem mehrspaltigen CSS3-Layoutmodul

CSS3-Hintergrundbilder

Hintergrundbilder und Texturen können verwendet werden, um einen Hintergrund ohne die Verwendung separater Divs zu überlagern, wodurch Websites häufig eine schöne grafische Note erhalten. In CSS3 können wir jetzt auch Dimensionen für Bilder anwenden und mehrere Hintergrundbilder innerhalb einer einzigen Regel definieren. Es gibt zwei Methoden, mit denen Regeln festgelegt werden können. Sie sind die individuelle CSS3-Hintergrundregel und die CSS3-Kurzhintergrundregel. Ich werde beide in diesem Segment überprüfen.

Die Browserunterstützung für mehrere CSS3-Hintergründe umfasst Mozilla Firefox (3.6+), Safari / Chrome (1.0 / 1.3 +), Opera (10.5+) und Internet Explorer (9.0+).

Die individuelle CSS3-Hintergrundmethode ist im Wesentlichen eine durch Kommas getrennte Liste von Ebenenbildern, die in der Syntaxform geschrieben sind:

 Hintergrund: URL (% path% / image1.xxx), URL (% path% / image2.xxx); 

Und mit der individuellen Hintergrundmethode können wir eine durch Kommas getrennte Liste von Hintergrundeigenschaften einfügen, einschließlich Hintergrundwiederholung, Hintergrundanhang, Hintergrundposition, Hintergrundclip, Hintergrundursprung und Hintergrundgröße.

Im folgenden Beispiel wird der Hintergrund durch eine Klasse mit einer Breite von 800, einer Höhe von 500 und einem Hintergrund definiert, der drei überlagerte Bilder enthält, wobei die Hintergrundposition und die Hintergrundwiederholung wie in diesem CSS3-Code gezeigt definiert sind:

 .mBg_1 { 
 Breite: 800px; 
 Höhe: 500px; 
 Hintergrund: 
 URL (images / barn.png), 
 URL (images / clouds.png), 
 URL (images / grass.png); 
 Hintergrundposition: unten, links oben, unten; 
 Hintergrundwiederholung: keine Wiederholung; 
 }} 

Der obige Code führt zu diesem Beispiel der in Chrome angezeigten Bilder von Scheune, Wolke und Gras:

Abbildung A.

Die andere Art der Darstellung von Hintergrundbildern verwendet die sogenannte Hintergrundkurzmethode. Die W3C CSS3-Spezifikation für Hintergründe und Rahmen enthält diese Erklärung der Hintergrundkurzsyntax:

Die Anzahl der durch Kommas getrennten Elemente definiert die Anzahl der Hintergrundebenen. Bei einer gültigen Deklaration setzt die Kurzschrift für jede Ebene zuerst die entsprechende Ebene für "Hintergrundposition", "Hintergrundgröße", "Hintergrundwiederholung", "Hintergrundursprung", "Hintergrundclip" und "Hintergrund" -attachment 'an den Anfangswert dieser Eigenschaft und weist dann alle expliziten Werte zu, die für diesen Layer in der Deklaration angegeben sind. Schließlich wird 'Hintergrundfarbe' auf die angegebene Farbe gesetzt, falls vorhanden, andernfalls auf den Anfangswert.

Wenn ein Wert vorhanden ist, werden sowohl 'Hintergrundursprung' als auch 'Hintergrundclip' auf diesen Wert gesetzt. Wenn zwei Werte vorhanden sind, setzt der erste 'Hintergrundursprung' und den zweiten 'Hintergrundclip'.

Hierbei ist zu beachten, dass die Hintergrundfarbe die letzte Ebene in der Deklaration sein muss, die die Kurzschriftmethode verwendet.

Eine Möglichkeit zur Darstellung der Hintergrundkurzmethode, bei der Bilder mit jeweils einer genauen Position angegeben werden, ist in der folgenden Syntax dargestellt:

 Hintergrund: URL (% Pfad%) Xpx Ypx, wobei Xpx = x-Achse und Ypx = y-Achse; 

Beispielsweise definiert die folgende CSS-Hintergrundregel das HTML des Dokuments mit einer Reihe kleiner Bilder, einschließlich eines Rasters und mehrerer darüber geschichteter Farbfeldchips.

 html { 
 Hintergrund: 
 URL (images / ffccff_swatch.png) 175px 25px no-repeat, 
 URL (images / ff9933_swatch.png) 125px 425px no-repeat, 
 URL (images / cccc33_swatch.png) 325px 325px no-repeat, 
 URL (images / 669966_swatch.png) 325px 125px ohne Wiederholung, 
 URL (images / cccccc_swatch.png) 175px 275px no-repeat, 
 URL (images / ffffcc_swatch.png) 425px 125px no-repeat, 
 URL (images / ccffcc_swatch.png) 575px -25px no-repeat, 
 URL (images / ffccff_swatch.png) 225px 425px no-repeat, 
 URL (images / ff9933_swatch.png) -25px 225px no-repeat, 
 URL (images / ffccff_swatch.png) 525px 325px no-repeat, 
 URL (images / ff9933_swatch.png) 375px 225px no-repeat, 
 URL (images / cccc33_swatch.png) 125px 225px no-repeat, 
 URL (images / grid.png) wiederholen; 
 }} 

Dieses Beispiel, das die Kurzhintergrundmethode verwendet, führt zu einem grafischen Hintergrund, der einen Teil des Inhalts früherer CSS3-Segmente in den HTML-Code einbezieht, einschließlich Blockquote und mehrspaltigem Layout. Es wird wie folgt in Chrome gerendert:

Abbildung B.

Das Positionieren von Bildern mithilfe der CSS3-Methode für Hintergrundeigenschaften kann auch die Form annehmen, dass für jedes Bild eine Position wie in dieser Form verwendet wird:

 .mBg_2 { 
 Breite: 800px; 
 Höhe: 500px; 
 Hintergrund: 
 URL (images / barn.png) unten rechts keine Wiederholung, 
 URL (images / clouds.png) oben links no-repeat, 
 URL (images / grass.png) unten no-repeat; 
 }} 

Der obige Code führt zu Folgendem, wie in Chrome angezeigt:

Abbildung C.

Wie Sie den obigen Beispielen entnehmen können, gibt es zwei Möglichkeiten, die geschichteten Bilder mithilfe von CSS3 darzustellen. In den nächsten Abschnitten von CSS3 werden Rahmenbilder, abgerundete Ecken, 3D-Text, Übergänge und andere Features und Funktionen überprüft, die heute implementiert werden können.

© Copyright 2020 | mobilegn.com