CSS und mehrere Hintergründe

Die CSS-Eigenschaft backgroundist eine der am häufigsten verwendeten Eigenschaften. Die Webentwicklungs-Community ist sich jedoch der Möglichkeiten, die mehrere Hintergründe bieten, noch nicht sehr bewusst. Hier werde ich ernsthaft darüber sprechen, was mehrere Hintergründe bewirken können und wie die Standard-CSS-Mechanismen optimal genutzt werden können.



In diesem Artikel werde ich ausführlich auf die Eigenschaft eingehen background-image, anschauliche Beispiele für die gemeinsame Nutzung mehrerer Hintergrundbilder eines Elements geben und die Stärken dieses Ansatzes berücksichtigen. Hier wird es viele Abbildungen geben. Wenn Sie mit der CSS-Eigenschaft nicht vertraut sind , sollten Sie sich vor dem Lesen des Materials diese MDN-Dokumentationsseite ansehen , die dieser Eigenschaft gewidmet ist.







background

Einführung

Eine CSS-Eigenschaft backgroundist eine Kurzform-Eigenschaft, mit der Sie die folgenden allgemeinen Elementeigenschaften festlegen können:

• Hintergrund-Clip
• Hintergrundfarbe
• Hintergrundbild
• Hintergrundherkunft
• Hintergrundposition
• Hintergrund Wiederholung
• Hintergrundgröße
• Hintergrund-Anhang

Hier werden wir auf die Eigenschaften konzentrieren background-image, background-positionund background-size.



Betrachten Sie das folgende Beispiel:

.element {
  background: url(cool.jpg) top left/50px 50px no-repeat;
}

Die Startposition des Hintergrundbilds befindet sich in der oberen linken Ecke des Elements. Die Bildgröße ist 50px * 50px. Beim Festlegen einer Eigenschaft ist backgroundes wichtig, die Reihenfolge der Eigenschaften zu berücksichtigen, die die Position und Größe des Hintergrundbilds definieren.





Bildpfad, Position und Größe



In der vorherigen Abbildungbackground-positionfolgen aufWerte zum Festlegen einer EigenschaftEigenschaftswertebackground-size. Wenn wir diese Werte in eine andere Reihenfolge bringen, erhalten wir falsch gestaltetes CSS. Zum Beispiel - so:

.element {
  /* :  CSS */
  background: url(cool.jpg) 50px 50px/top left no-repeat;
}

Hintergrundbildposition

Verwenden Sie die Eigenschaft, um den Bereich für den Hintergrund, die ursprüngliche Position des Hintergrundbilds, festzulegen background-origin. Ich liebe die Flexibilität, die Eigentum bietet background-position. Sie können den Hintergrund von Elementen auf verschiedene Arten positionieren:

• Keywords ( top, right, bottom, left, center).
• Prozentwerte. Zum Beispiel : 50%.
• Werte, die bestimmte Abstände angeben. Zum Beispiel : 20px 2.5rem.
• Werte, die die Auffüllung von den Kanten des Elements darstellen. Zum Beispiel : top 20px left 10px.

Koordinatensystem Der Ursprung des Koordinatensystems



, das beim Positionieren von Hintergrundbildern verwendet wird, befindet sich in der oberen linken Ecke des Elements. Der Anfangswert der Eigenschaftbackground-positionist0% 0%.



Es ist erwähnenswert, dass der Werttop leftder gleiche ist wie der Wertleft top. Der Browser ist intelligent genug, um zu bestimmen, wie viel von diesem Wert auf der X-Achse und wie viel auf der Y-Achse liegt.





Oben links und links oben sind gleich.

.element {
  background: url(cool.jpg) top left/50px 50px no-repeat;
  /*  -   ,    */
  background: url(cool.jpg) left top/50px 50px no-repeat;
}

Hintergrundbildgröße

Der Name der Eigenschaft, die die Größe des Hintergrundbilds definiert, background-sizegibt die Rolle dieser Eigenschaft eindeutig an. Die Größe eines Hintergrundbildes entspricht seiner Breite und Höhe. Beachten Sie beim Festlegen dieser Eigenschaft, dass der erste Wert die Breite und der zweite die Höhe darstellt.





Zuerst kommt



die Breite , dann die Höhe. Wenn die Breite und Höhe des Hintergrundbilds gleich sind, bedeutet dies, dass wir keine zwei Werte für angeben müssenbackground-size. In einer solchen Situation ist ein Wert ausreichend.



Hier wäre es übrigens nützlich zu erwähnen, dass die CSS-Spezifikation Folgendes dazu sagt: "Wenn nur ein Wert angegeben wird, wird angenommen, dass der zweite Wert automatisch ist." Dieser Mechanismus ist jedoch nicht in Browsern implementiert, obwohl sich dies in Zukunft ändern kann. Ich danke Ilya Streltsyn, dass sie mich auf dieses Detail aufmerksam gemacht hat.





Ein Wert legt sowohl die Breite als auch die Höhe fest.



Nachdem wir uns nun mit den Grundlagen der Verwendung einer Eigenschaft befasst habenbackground, wollenwir uns mit derArbeit mit mehreren Hintergründen befassen.

Mehrfacher Hintergrund

Eine Eigenschaft backgroundkann eine Hintergrundebene beschreiben. Bisher haben wir nur solche Beschreibungen gesehen, oder - mehrere Ebenen, deren Eigenschaften durch ein Komma getrennt sind. Wenn mehrere Hintergrundbilder dieselbe Größe haben, überlappt eines die anderen vollständig.

.element {
  background: url(cool.jpg) top left/50px 50px no-repeat,
    url(cool.jpg) center/50px 50px no-repeat;
}

Verwenden mehrerer Hintergrundbilder



In der obigen Abbildung besteht ein Element aus zwei Ebenen mit Hintergrundbildern. Jedes dieser Bilder ist anders positioniert. Dies ist das einfachste Beispiel für die Verwendung mehrerer Hintergründe. Schauen wir uns nun ein fortgeschritteneres Beispiel an.

Reihenfolge des Stapelns von Hintergrundbildern übereinander

Wenn Sie ein Element mit mehreren Hintergrundbildern ausstatten und eines davon die gesamte Breite und Höhe des übergeordneten Elements einnimmt, ist die Reihenfolge wichtig, in der die Hintergründe gestapelt werden. Die Entscheidung, in welcher Reihenfolge die Hintergründe übereinander gestapelt werden sollen, kann schwierig sein. Betrachten Sie das folgende Beispiel.

.hero {
  min-height: 350px;
  background: url('table.jpg') center/cover no-repeat,
    url('konafa.svg') center/50px no-repeat; 
}

Hier haben wir ein Tabellenbild ( table.jpg) und ein Plattenbild ( konafa.svg). Welches dieser Hintergrundbilder wird Ihrer Meinung nach zuerst angezeigt? Ein Bild von einem Tisch oder ein Bild von einem Teller?





Element mit zwei Hintergrundbildern Die



richtige Antwort auf diese Frage besteht darin, zuerst das Tabellenbild zu haben. In CSS wird der zuerst beschriebene Hintergrund dem zweiten Hintergrund, der zweite dem dritten Hintergrund usw. überlagert. Das Ändern der Beschreibungsreihenfolge von Hintergründen wirkt sich auf deren Anzeige im Element aus.

.hero {
  background: url('konafa.svg') center/50px no-repeat,
  url('table.jpg') center/cover no-repeat;
}

Der erste Hintergrund wird dem zweiten überlagert.



Wie Sie sehen können, liegt der vom ersten angegebene Hintergrund über dem vom zweiten angegebenen Hintergrund.

Feste Farben

Angenommen, wir möchten mit den CSS-Hintergrundwerkzeugen für ein Element einen festen Hintergrund erstellen. Wie kann man es machen? Dies ist dank CSS-Verläufen eine einfache Aufgabe. Der Punkt ist, dass wenn Sie eine Funktion linear-gradientmit denselben Stoppfarben verwenden, dies zu einer Volltonfarbe führt.

.hero {
  background: linear-gradient(#3c88Ec, #3c88Ec)
}

Mit linearem Farbverlauf und gleichen Stoppfarben erstellter Hintergrund



Hier ist ein einfaches Beispiel für die Verwendung eines Verlaufs zum Einrichten eines Hintergrunds. Verlaufsverläufe können jedoch tatsächlich verwendet werden, um sehr interessante und nützliche Effekte zu erzielen.

Anwendungsfälle und praktische Beispiele

▍Dunkles Hintergrundbild

Um den Text des oberen Abschnitts einer Seite besser lesbar zu machen, muss das Hintergrundbild dieses Abschnitts häufig abgedunkelt werden. Mit zwei Hintergrundbildern ist dies ganz einfach.

.hero {
  background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)),
    url("landscape.jpg") center/cover;
}

Verdunkeltes Hintergrundbild



Interessanterweise kann dieselbe Methode verwendet werden, um das Hintergrundbild von Elementen zu tönen.

.hero {
  background: linear-gradient(135deg, rgba(177, 234, 77, 0.25), rgba(69, 149, 34, 0.25),
    url("landscape.jpg") center/cover;
}

Getönter Hintergrund

▍ Zeichnen mit CSS

Die Möglichkeiten, CSS-Farbverläufe zum Malen zu verwenden, sind wirklich endlos. Insbesondere sind wir über Gradienten unter Verwendung von Funktionen beschrieben linear-gradient, radial-gradientund andere. In diesem einfachen Beispiel erfahren Sie, wie Sie einen Laptop mithilfe von Verläufen zeichnen.





Laptop-Bild



Lassen Sie uns dieses Bild aufschlüsseln und überlegen, welche Farbverläufe wir benötigen.





Kunststoff-Displayrahmen, LCD-Display, Reflexion, abgerundete Kanten des Gehäuses, Gehäuse



Beachten Sie, dass es beim „Zerlegen“ des Laptops viel einfacher ist, herauszufinden, welche Farbverläufe erforderlich sind, um ihn mithilfe der Technik des Aufbringens mehrerer Hintergründe zu zeichnen. Sie haben vielleicht bemerkt, dass ich ein paar Kreise als abgerundete Ecken der Laptoptasche verwendet habe. Der Punkt ist, dass es keine Standardmethode zum Erstellen von Verläufen mit abgerundeten Ecken gibt.



Jetzt fangen wir an zu zeichnen. Definieren wir zunächst jeden der Farbverläufe als CSS-Variable und dimensionieren die entsprechenden Elemente. Ich verwende gerne CSS-Variablen, weil dies die Komplexität des Codes verringern, den Code sauberer und leichter lesbar machen kann. Nachdem die Farbverläufe beschrieben wurden, können Sie sie positionieren.

:root {
  --case: linear-gradient(#222, #222);
  --case-size: 152px 103px;

  --display: linear-gradient(#fff, #fff);
  --display-size: 137px 87px;

  --reflection: linear-gradient(205deg, #fff, rgba(255, 255, 255, 0));
  --reflection-size: 78px 78px;

  --body: linear-gradient(#888, #888);
  --body-size: 182px 9px;

  --circle: radial-gradient(9px 9px at 5px 5.5px, #888 50%, transparent 50%);
  --circle-size: 10px 10px;
}

Also haben wir die Farbverläufe beschrieben und ihre Größen festgelegt. Lassen Sie uns nun über ihre Positionierung nachdenken. Die Lösung dieses Problems wird durch das schematische Diagramm des folgenden Laptops erleichtert.





Schematische Darstellung eines Laptops

Implementierung der Lichtreflexion vom Laptop-Displayrahmen

Wie bereits erwähnt, muss zuerst die Hintergrundebene definiert werden, die über allen anderen Ebenen liegen sollte. In unserem Fall ist der erste Gradient derjenige, der die Reflexion von Licht vom Laptop-Displayrahmen simuliert.





Lichtreflexion vom Laptop-Displayrahmen

LCD Bildschirm

Das Laptop-Display ist auf die Mitte der X-Achse ausgerichtet und die Y-Achse ist in 6Pixel vom Ursprung versetzt.





Laptop-Anzeige

Rahmen anzeigen

Der Rahmen befindet sich unterhalb der Anzeige, ist auf der X-Achse zentriert und auf der Y-Achse 0pxvom Ursprung versetzt.





Rahmen anzeigen

Laptoptasche

Und das ist das interessanteste Element. Zunächst müssen Sie berücksichtigen, dass das Element, das die Laptop-Hülle darstellt, ein Rechteck ist und dass die Hülle abgerundete Kanten aufweist. Dies wird durch die Verwendung eines Kreispaares erreicht.





Laptoptasche

Die fertige Zeichnung

:root {
  --case: linear-gradient(#222, #222);
  --case-size: 152px 103px;
  --case-pos: center 0;

  --display: linear-gradient(#fff, #fff);
  --display-size: 137px 87px;
  --display-pos: center 6px;

  --reflection: linear-gradient(205deg, #fff, rgba(255, 255, 255, 0));
  --reflection-size: 78px 78px;
  --reflection-pos: top right;

  --body: linear-gradient(#888, #888);
  --body-size: 182px 9px;
  --body-pos: center bottom;

  --circle: radial-gradient(9px 9px at 5px 5.5px, #888 50%, transparent 50%);
  --circle-size: 10px 10px;
  --circle-left-pos: left bottom;
  --circle-right-pos: right bottom;
}

.cool {
  width: 190px;
  height: 112px;

  background-image: var(--reflection), var(--display), var(--case), var(--circle), var(--circle), var(--body);

  background-size: var(--reflection-size), var(--display-size), var(--case-size), var(--circle-size), var(--circle-size), var(--body-size);

  background-position: var(--reflection-pos), var(--display-pos), var(--case-pos), var(--circle-left-pos), var(--circle-right-pos), var(--body-pos);

  background-repeat: no-repeat;

  /*outline: solid 1px;*/
}

Hier ist ein CodePen-Projekt, mit dem Sie experimentieren können.

▍Mischen mehrerer Hintergründe

Die Möglichkeit, verschiedene Modi zum Mischen von Hintergründen zu verwenden, die sich überlagern, eröffnet einen weiten Spielraum für die Erzielung verschiedener Effekte. Der einfachste Weg, diese Technik zu verwenden, besteht darin, Bilder zu entsättigen. Angenommen, Sie haben ein farbiges Hintergrundbild in CSS, das Sie entsättigen möchten, Schwarzweiß.





Farbbild und schwarze Hilfsebene



Beachten Sie, dass das folgende CSS-Snippet die Eigenschaft verwendetbackground-blend-mode: color. Auf diese Weise können Sie den gewünschten Effekt erzielen.

.hero {
  background: linear-gradient(#000, #000),
  url("landscape.jpg") center/cover;
  background-blend-mode: color;
}

Entsättigtes Bild



Verwenden Sie mehrere Hintergründe in CSS?