Beispielcode für die Verwendung von CSS zum Schreiben eines strukturierten Hintergrundbilds mit Farbverlauf

Die Seitenlänge im Projekt beträgt etwa 2000 Pixel oder mehr, und das Hintergrundbild verfügt über Textur und Farbverlauf, sodass es sehr groß und das Laden zeitaufwändig wäre. Daher verwenden wir CSS zur Implementierung.

Die Website, die wir dieses Mal hauptsächlich verwendet haben, ist Hero Patterns - eine kostenlose Online-Texturbibliothek

Diese Website bietet viele vorgefertigte Hintergründe und Sie können auch die Hintergrundfarbe, Musterfarbe und Transparenz anpassen.

Die Hintergrundfarbe der Website ist eine Volltonfarbe. Wenn wir einen Farbverlaufshintergrund benötigen, können wir die Hintergrundfarbe der Textur auf eine transparente Farbe einstellen und dann das Hintergrundbild des übergeordneten Elements auf einen Farbverlaufseffekt einstellen.

html,Text{
  Hintergrund: #000;
  Mindestbreite: 1024px; 
  Hintergrundbild: linearer Farbverlauf (nach rechts, #000 -6 %, #703ccc, #000 110 %);
}

.Diffus{
    Mindestbreite: 1024px;
    Höhe: automatisch;
    Position: relativ;
    links: 0;
    oben: 0;
    Breite: 100 %;
    Höhe: 100%;
    Hintergrundfarbe: transparent;
    Hintergrundbild: URL("data:image/svg+xml,%3Csvg Breite='6' Höhe='6' Ansichtsfeld='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg Füllung='%23000000' Füllopacity='0,61' Füllregel='evenodd'%3E%3CPfad d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
    }

Okay, jetzt sind wir fertig~

Dies ist das Ende dieses Artikels über die Verwendung von CSS zum Schreiben von Beispielcode für strukturierte Hintergrundbilder mit Farbverlauf. Weitere relevante Inhalte zu CSS-Hintergrundbildern mit Farbverlauf finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!