SVG-Bilder können, genau wie PNG, JPG oder GIF, auch als background-image in CSS verwendet werden.
.element {
background-image: url(/images/image.svg);
}All die gleiche Großartigkeit von SVG ist mit dabei, wie Flexibilität bei gleichbleibender Schärfe. Außerdem können Sie alles tun, was eine Rastergrafik kann, zum Beispiel wiederholen.
In diesem Video schauen wir uns an, wie man einem Modul am unteren Rand einen „gerissenen Papierrand“-Effekt über das Hintergrundbild eines Pseudo-Elements verleiht. Eine ziemlich clevere Methode, so dass das Hauptelement selbst eine durchgehende Hintergrundfarbe haben kann, die wir anpassen können und den Hintergrund der Seite durch den negativen Raum in der SVG durchscheinen lassen. Außerdem wird keine zusätzliche Markup benötigt.
Hallo,
Ich habe mich gerade gefragt, ob dieses 40%px in der CSS-Datei ein Tippfehler ist oder eine bestimmte Bedeutung hat?
Definitiv ein Tippfehler! Danke.
Ja, es verwirrt den Browser und er wird einen Fehler anzeigen (ungültige Eigenschaft). Entweder haben Sie 40px oder 40% geschrieben. „px“ und „%“ sind beides Einheiten. Nur eine davon kann gleichzeitig verwendet werden :)
Das wusste ich nicht. Danke fürs Teilen, Chris
Das ist großartig!
Danke dafür!
Wie ist die Browserunterstützung dafür?
Wie ändere ich die Farbe dieser SVG von Weiß auf etwas anderes?
Können Hintergrundbilder mit „use“ aus einem im HTML-Code definierten SVG-Element angegeben werden?
Sie können inline mit CSS angegeben werden
background: url(‘data:image/svg+xml;utf8,<svg…
Warum können nicht alle verschiedenen Methoden zur Anzeige eines Icons als Hintergrundbild in nur einem Artikel enthalten sein?