Wie verwendet ich CSS background-size Attribute, um coole Hintergrundstreifen zu erstellen? Dieser Artikel wird einen Fall teilen, der zeigt, wie visuelle Effekte von Hintergrundstreifen übergingen k?nnen, wenn sie mit CSS -Gradienten, Mischmodi und background-size Eigenschaften übergeben werden.

Normalerweise verwenden wir background-size: cover, um das Hintergrundbild das gesamte Element zu füllen. Dieser Fall erfordert jedoch eine fortgeschrittenere Hintergrundgr??enregelung: Hintergrundstreifen, die sich über den übergang der Maus wagen. Der Effekt ist wie folgt (bitte schweben Sie Ihre Maus über den folgenden Bereich):

(Die Demonstration des dynamischen Effekts sollte hier eingefügt werden, was mit dem Originaltext übereinstimmt)

Der Schlüssel zum Erreichen dieses Effekts besteht darin, den Gradienten und die Mischmodi genial zu verwenden. Beginnen wir mit einer einfachen HTML -Struktur:

<div></div>

Erstes CSS -Stil:

div {
  width: 500px;
  height: 500px;
  background: palegreen;
}

Erstellen Sie Hintergrundstreifen

Wir k?nnen mit CSS linearer Gradient zum Erstellen von Streifen verwenden. Aufgrund der ungleichm??igen Breite der Streifen und der Notwendigkeit von übergangseffekten k?nnen wir keine Wiederholungsgradienten direkt verwenden. Hier simulieren wir fünf Streifen, indem wir fünf lineare Gradientenhintergründe überlagern und sie in die obere rechte Ecke des Beh?lters positionieren:

div {
  width: 500px;
  height: 500px;
  background: 
    linear-gradient(black, black) top right,
    linear-gradient(black, black) top 100px right,
    linear-gradient(black, black) top 200px right,
    linear-gradient(black, black) top 300px right,
    linear-gradient(black, black) top 400px right, 
    palegreen;
}

Um den Code zu vereinfachen, k?nnen wir benutzerdefinierte Eigenschaften verwenden:

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
}

--gt bedeutet Gradienten und steuert --n den vertikalen Versatz des Streifens. Derzeit ist der lineare Gradient auf reines Schwarz eingestellt, was für nachfolgende Maskierungs- und Mischeffekte dient. Um zu verhindern, dass der Hintergrund wiederholt Kacheln ist, müssen wir background-repeat: no-repeat;:

festlegen

div {
  /* ... */
  background-repeat: no-repeat;
}

Stellen Sie die Gr??e und den Abstand von Streifen ein

Die aktuellen Streifen überlappen sich und sind fast unm?glich zu sehen. Wir müssen das Attribut background-size verwenden, um die Breite und H?he des Streifens festzulegen. Das background-size -Merkmal unterstützt die doppelte Wertsyntax und wir k?nnen die Breite bzw. die H?he festlegen. Der folgende Code legt die Breite jedes Streifens unter Verwendung des Standardwerts der H?he fest: auto

div {
  /* ... */
  background-size: 60%, 90%, 70%, 40%, 10%;
}

Da die H?he

ist, bedecken sich die Streifen gegenseitig. Wir müssen die Doppelwertsyntax verwenden und die gleiche H?he festlegen: auto

div {
  /* ... */
  background-size: 60% var(--n), 90% var(--n), 70% var(--n), 40% var(--n), 10% var(--n);
}

Um den Abstand zwischen Streifen hinzuzufügen, k?nnen wir die H?he jedes Streifens leicht reduzieren:

div {
  --h: calc(var(--n) - 5px);
  /* ... */
  background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}

Maske und Mischmodus

?ndern Sie die Hintergrundfarbe in wei?:

div {
  /* ... */
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    #fff;
  /* ... */
}

Um Maskierungs- und Mischeffekte zu erzielen, wickeln wir

in einen übergeordneten Container ein und fügen eine neue hinzu: <div> <code><div> Layout mit CSS -Gitter: <pre class="brush:php;toolbar:false"><section> &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; </section></pre> <p> </p> Tradientenfarben auf die erste <pre class="brush:php;toolbar:false">section { display: grid; align-items: center; justify-items: center; width: 500px; height: 500px; } section &gt; div { width: inherit; height: inherit; grid-area: 1 / 1; }</pre> anwenden und den vorherigen Streifenstil im zweiten <p> anwenden und mit <code><div>: <code><div> implementieren und Bildschirmmischmodus implementieren <code>mix-blend-mode: screen; Maus -Hover -Effekt

div:nth-child(1) { 
  background: linear-gradient(to right, red, orange); 
}

div:nth-child(2)  {
  /* ... previous styles ... */
  mix-blend-mode: screen;
}

Schlie?lich fügen wir einen Mausover -Effekt hinzu, um die Streifenbreite auf die volle Breite des Beh?lters zu erweitern:

Der endgültige Effekt wird zu Beginn gezeigt. Bitte beachten Sie, dass für eine bessere Benutzererfahrung empfohlen wird, die Einstellungen für Sporteffekte zu reduzieren, um die Vorlieben verschiedener Benutzer zu erfüllen.

section:hover > div:nth-child(2){
  background-size: 100% var(--h);
  transition: background-size 1s;
}

Diese Methode ist eine gute Wartbarkeit und Anpassung, und Sie k?nnen leicht die H?he, Farbe und Ausrichtung der Streifen usw. ?ndern.

Ich hoffe, dieser Fall kann Ihnen helfen, die CSS -Attribute besser zu verstehen und anzuwenden. Wenn Sie andere Implementierungsmethoden haben, teilen Sie es bitte im Kommentarbereich weiter! background-size