Können Sie SVG-Hintergrundbilder mit CSS formatieren?

SVG-Hintergrundbilder über CSS formatieren

Können Sie ein SVG formatieren, wenn es als Hintergrundbild verwendet wird, indem Sie dieselbe CSS-Datei verwenden, in der es festgelegt ist? den Hintergrund?

Während Sie SVG-Bilder (einzeln oder als Sprites) erfolgreich positionieren, skalieren und ausschneiden können, ist es nicht möglich, das SVG in derselben CSS-Datei zu formatieren, die es als Hintergrundbild zuweist.

Betrachten Sie den folgenden Pseudo-CSS-Code, der darauf abzielt, die Farbe einer Form basierend auf der Klasse ihres übergeordneten Elements zu ändern:

element1 {
    background-image(icon.svg);
}

element1.black .svg-pathclass {
    fill: #000000;
}

element1.white .svg-pathclass {
    fill: #ffffff;
}

Dieser Ansatz geht davon aus, dass das SVG einen Pfad mit der „svg-pathclass "-Klasse, ist nicht praktikabel.

Der Grund liegt in der Natur von SVGs und CSS. Ein SVG ist ein eigenständiges Dokument, das in einem Daten-URI vorbereitet oder extern referenziert werden kann. Sobald es als Hintergrundbild in einer anderen Datei verwendet wird, wird es zu einem unveränderlichen Bild, das nicht durch CSS geändert werden kann.

Das obige ist der detaillierte Inhalt vonKönnen Sie SVG-Hintergrundbilder mit CSS formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!