Detaillierte Analyse der verschiedenen Hintergründe, Nutzungsszenarien und Techniken von CSS

Dieser Artikel wurde auf GitHub https://github.com/qq449245884/xiaozhi aufgenommen. Der Artikel wurde kategorisiert und viele meiner Dokumente und Lernmaterialien wurden aussortiert.

Der CSS- background ist eine der am häufigsten verwendeten CSS-Eigenschaften. Allerdings sind sich nicht alle Entwickler der Verwendung mehrerer Kontexte bewusst. In diesem Zeitraum lag der Schwerpunkt auf der Verwendung unterschiedlicher Hintergrundszenen. In diesem Artikel gehen wir detailliert auf die Eigenschaft „background-image“ ein und erklären anhand von Grafiken die Verwendung mehrerer Hintergründe und deren praktischen Nutzen.

Wenn Sie noch nichts über die CSS-Hintergrundeigenschaften wissen, können Sie zunächst bei MDN nachschauen, was Sie wissen müssen.

einführen

Die CSS- background ist eine Abkürzung für die folgenden Eigenschaften:

Hintergrundclip, Hintergrundfarbe, Hintergrundbild, Hintergrundursprung, Hintergrundposition, Hintergrundwiederholung, Hintergrundgröße und Hintergrundanhang.

In diesem Artikel konzentrieren wir uns auf background-image , background-position und background-size . Sind Sie bereit? Lasst uns anfangen!

Betrachten Sie das folgende Beispiel:

.element {
  Hintergrund: URL (cool.jpg) oben links/50px 50px keine Wiederholung;
}

Das Hintergrundbild befindet sich in der oberen linken Ecke des Elements und hat eine Größe von 50px * 50px . Es ist wichtig, die Reihenfolge von Position und Größe zu verstehen und sich zu merken.

Im Bild oben folgt auf background-position die background-size . Ihre Reihenfolge kann nicht geändert werden, da sie sonst ungültig wird, wie unten gezeigt:

.element {
	/* Warnung: Ungültiges CSS */
	Hintergrund: URL (cool.jpg) 50px 50px/oben links, keine Wiederholung;
}

Hintergrundposition

Die Positionierung des Elements ist relativ zur Positionierungsebene, die durch background-origin festgelegt wird. Mir gefällt die Flexibilität von background-position , die mehrere Möglichkeiten zur Positionierung eines Elements ermöglicht:

• Schlüsselwortwerte ( top , right , bottom , left , center )
• Prozentwert, zum Beispiel: 50%
• Längenwert, zum Beispiel: 20px , 2.5rem
• Randversatzwert, beispielsweise: top 20px left 10px

Das Koordinatensystem beginnt in der oberen linken Ecke und der Standardwert beträgt 0% 0% .

Es ist erwähnenswert, dass der Wert von top left derselbe ist wie der Wert von left top . Der Browser ist intelligent genug, um herauszufinden, welche davon für x Achse und welche für y Achse verwendet werden sollen.

.element {
	Hintergrund: URL (cool.jpg) oben links/50px 50px keine Wiederholung;
	/* Das Obige ist das Gleiche wie das Folgende*/
	Hintergrund: URL (cool.jpg) links oben/50px 50px keine Wiederholung;
}

Hintergrundgröße

Bei background-size ist die erste width und die zweite height .

Anstatt zwei Werte zu verwenden, können Sie einen Wert verwenden, was bedeutet, dass Breite und Höhe gleich sind.

Nachdem ich nun verstanden habe, wie CSS- background funktionieren, wollen wir untersuchen, wie mehrere Hintergründe verwendet werden.

Mehrere Hintergründe

background Hintergrundeigenschaft kann eine oder mehrere durch Kommas getrennte Ebenen haben. Wenn mehrere Hintergründe die gleiche Größe haben, überdeckt einer den anderen.

.element {
	Hintergrund: url(cool.jpg) oben links/50px 50px keine Wiederholung,
	URL (cool.jpg) Mitte/50px 50px keine Wiederholung;
}

Im Bild oben haben wir zwei Hintergrundebenen. Jeder Standort ist anders. Dies ist die grundlegende Verwendung mehrerer Kontexte. Sehen wir uns ein fortgeschritteneres Beispiel an.

Platzierungsauftrag

Wenn Sie mehrere Hintergründe platzieren und einer davon die gesamte Breite und Höhe des übergeordneten Hintergrunds einnimmt, kann die Reihenfolge der Platzierung etwas durcheinander geraten. Betrachten Sie das folgende Beispiel:

.Held {
  Mindesthöhe: 350px;
  Hintergrund: URL('table.jpg') Mitte/Cover keine Wiederholung,
    url('konafa.svg') Mitte/50px keine Wiederholung; 
}

Wir haben ein Bild von einem Teller und einem Tisch. Was glauben Sie, welcher wird oben liegen?

Die Antwort ist eine Tabelle . In CSS kann der erste Hintergrund über den zweiten Hintergrund platziert werden, der zweite Hintergrund über den dritten Hintergrund und so weiter. Durch Ersetzen der Reihenfolge der Hintergründe erhalten Sie das erwartete Ergebnis.

Anwendungsfälle und Beispiele

Maskenebene

Oft möchten wir über einen bestimmten Abschnitt eine Maskenebene legen, um den Text leichter lesbar zu machen. Dies lässt sich ganz einfach durch das Stapeln zweier Hintergründe erreichen.

.Held {
	Hintergrund: linearer Farbverlauf (rgba (0, 0, 0, 0,15), rgba (0, 0, 0, 0,15)),
    url("querformat.jpg") Mitte/Cover;
}

Das Gute ist, dass wir mit derselben Methode wie oben eine Tönung auf Elemente anwenden können. Bedenken Sie Folgendes:

.Held {
	Hintergrund: linearer Farbverlauf (135 Grad, RGBA (177, 234, 77, 0,25), RGBA (69, 149, 34, 0,25),
    url("querformat.jpg") Mitte/Cover;
}

Zeichnen mit CSS

Die Möglichkeiten zur Verwendung von CSS-Verläufen sind endlos. Sie können linear-gradient oder radial-gradient usw. verwenden. Als Nächstes schauen wir uns an, wie man damit Laptops zeichnen kann.

Zerlegen Sie den Laptop und sehen Sie, welchen Farbverlauf wir verwenden müssen.

Beim Zerlegen des Laptops ist es einfacher, darüber nachzudenken, wie sich dies durch die Verwendung mehrerer CSS-Hintergründe erreichen lässt.

Als nächstes kommen die Zeichnungen. Als Erstes muss jeder Farbverlauf als CSS-Variable und deren Größe definiert werden. Ich verwende gerne CSS-Variablen, da sie die Komplexität Ihres Codes verringern und ihn übersichtlicher und leichter lesbar machen.

:Wurzel {
  --Fall: linearer Gradient (#222, #222);
  --Gehäusegröße: 152px 103px;

  --Anzeige: linearer Farbverlauf(#fff, #fff);
  --Anzeigegröße: 137px 87px;

  --Reflexion: linearer Farbverlauf (205 Grad, #fff, rgba (255, 255, 255, 0));
  --Reflexionsgröße: 78px 78px;

  --body: linearer Farbverlauf (#888, #888);
  --Körpergröße: 182px 9px;

  --Kreis: radialer Farbverlauf (9px 9px bei 5px 5,5px, #888 50 %, transparent 50 %);
  --Kreisgröße: 10px 10px;
}

Nachdem wir nun unsere Farbverläufe und ihre Größen definiert haben, besteht der nächste Schritt darin, sie zu platzieren. Betrachten Sie das folgende Bild für eine bessere visuelle Erklärung.

Bild anzeigen

Wie bereits erwähnt, sollten zuerst die Elemente definiert werden, die oben stehen müssen. In unserem Fall sollte das angezeigte Bild der erste Farbverlauf sein.

Anzeige LCD

Die Anzeige befindet sich in der Mitte x Achse und 6px von der y-Achse entfernt.

Displaygehäuse

Die Shell befindet sich unterhalb des Displays, in der Mitte der x-Achse und in einem Abstand von 0px von der y-Achse.

Hauptteil

Dies ist die interessanteste Komponente des Diagramms. Zunächst ist der Hauptkörper ein Rechteck mit zwei Kreisen auf jeder Seite (links und rechts).

Endergebnis

:Wurzel {
  --Fall: linearer Gradient (#222, #222);
  --Gehäusegröße: 152px 103px;
  --case-pos: Mitte 0;

  --Anzeige: linearer Farbverlauf(#fff, #fff);
  --Anzeigegröße: 137px 87px;
  --display-pos: Mitte 6px;

  --Reflexion: linearer Farbverlauf (205 Grad, #fff, rgba (255, 255, 255, 0));
  --Reflexionsgröße: 78px 78px;
  --Reflection-Pos: oben rechts;

  --body: linearer Farbverlauf (#888, #888);
  --Körpergröße: 182px 9px;
  --body-pos: unten in der Mitte;

  --Kreis: radialer Farbverlauf (9px 9px bei 5px 5,5px, #888 50 %, transparent 50 %);
  --Kreisgröße: 10px 10px;
  --circle-left-pos: links unten;
  --circle-right-pos: rechts unten;
}

.Cool {
  Breite: 190px;
  Höhe: 112px;

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

  Hintergrundgröße: var(--reflection-size), var(--display-size), var(--case-size), var(--circle-size), var(--circle-size), var(--body-size);

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

  Hintergrundwiederholung: keine Wiederholung;

  /*Umriss: durchgezogen 1px;*/
}

Gemischte Hintergründe

Spannend wird es, wenn man mehrere Hintergründe mischt. Angenommen, Sie haben ein Hintergrundbild in CSS und möchten es in Schwarzweiß umwandeln.

.Held {
  Hintergrund: linearer Farbverlauf (#000, #000),
  url("querformat.jpg") Mitte/Cover;
  Hintergrund-Mischmodus: Farbe;
}

Original: https://css-tricks.com/css-basics-using-multiple-backgrounds/

Es gibt keine Möglichkeit, in Echtzeit zu wissen, welche Fehler nach der Bereitstellung des Codes vorhanden sein könnten. Um diese Fehler anschließend zu beheben, wurde viel Zeit mit dem Debuggen von Protokollen verbracht. Hier möchte ich ein nützliches Tool zur Fehlerüberwachung empfehlen: Fundebug.

Damit ist dieser Artikel mit einer eingehenden Analyse der verschiedenen Hintergründe, Verwendungsszenarien und Techniken von CSS abgeschlossen. Weitere relevante Inhalte zu den verschiedenen Hintergründen und Verwendungsszenarien von CSS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!