Einführung in die Verwendung von SVG in CSS-Hintergrundbildern (mit Beispielen)

Dieser Artikel bietet Ihnen eine Einführung in die Verwendung von SVG in CSS-Hintergrundbildern. Er hat einen gewissen Referenzwert. Ich hoffe, er wird Ihnen hilfreich sein.

Bei der Verwendung von SVG in CSS-Hintergrundbildern können Sie viele Funktionen des CSS-Hintergrundattributs nutzen, wie z. B. Bildgröße und Bildposition usw. Es ist sehr einfach, die Größe des Bildes entsprechend der Größe des Geräts zu steuern. Ein weiterer Vorteil besteht darin, dass Sie keine SVG-Bilder in den HTML-Code einfügen müssen, wodurch der HTML-Code sauber bleibt.

Die Verwendung von SVG in CSS-Hintergrundbildern hat viele Vorteile und ist sehr hilfreich bei der Verbesserung der Leistung. Gibt es bei der Verwendung von SVG in einem CSS-Hintergrundbild eine Möglichkeit, dessen Farbe zu ändern? Lesen Sie weiter.

CSS-Maske

Verwenden Sie eine Maske in CSS, um die Hintergrundfarbe zu ändern. Wichtig ist, dass Browser sie jetzt besser unterstützen und noch mehr Gutes. Mit dem Maskenattribut kann eine Maske basierend auf dem Umriss des Elements erstellt werden. Mithilfe der Maske kann nur der Bereich des angegebenen Bildinhalts angezeigt werden, während der Bereich außerhalb des Bildbereichs ausgeblendet wird. So verwenden Sie es:

.icon {
background-color: red;
-webkit-mask-image: url(icon.svg);
mask-image: url(icon.svg);
}

mask hat auch viele Attribute wie mask-position, mask-repeat und mask-size, die den entsprechenden Attributen von Hintergrundbildern in CSS ähneln. Sie können abgekürzt verwenden Syntax wie Hintergrund:

.icon {
background-color: red;
-webkit-mask: url(icon.svg) no-repeat 50% 50%;
mask: url(icon.svg) no-repeat 50% 50%;
}

Die Browserunterstützung für Masken wird ebenfalls immer besser. Sie können die Unterstützung verschiedener Browser unter der folgenden Adresse überprüfen:

https://caniuse.com/#search=mask-image

Außerdem, wenn diese nicht eingeschränkt ist Wenn Sie es in CSS ändern, können Sie die SVG-Quelldatei direkt ändern

Ziehen Sie das SVG-Bild in den Editor und Sie können den SVG-Quellcode sehen

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" " 
<svg t="1540202401705" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10044" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
<defs>
<style type="text/css">
</style>
</defs>
<path d="M279.374 707.763C95.265 506.544 42.467 264.487 159.2 156.707c25.227-23.275 56.897-38.54 93.597-45.297 2.592-1.037 5.277-1.942 8.07-2.655 0.198-0.045 1.495-0.365 1.68-0.408 59.18-13.637 130.407 48.272 165.687 144.012 23.017 62.442 24.332 123.377 3.53 163.005-11.057 21.047-27.832 34.98-48.965 40.377-0.02 0.003-2.212 1.172-2.77 2.32-0.783 1.592-0.962 6.665 2.945 15.852 19.252 27.482 40.742 54.21 63.895 79.52 25.195 27.52 52.245 53.215 80.43 76.365 0.31 0.215 0.61 0.415 0.905 0.605 4.695 3.365 7.18 2.79 8.37 2.515 4.165-0.96 8.635-4.73 11.22-7.415 9.725-22.71 30.73-38.74 59.715-45.42 38.985-8.985 89.81-0.715 139.445 22.675 91.08 42.95 141.545 117.275 125.25 175.335-1.455 5.185-1.59 5.735-3.045 10.795-12.07 32.925-28.38 62.875-52.92 85.53-22.97 21.21-51.175 35.765-83.845 43.29l0.01 0C603.518 947.402 421.466 863.038 279.374 707.763zM593.493 646.688c-0.81 2.37-1.985 4.605-3.45 6.62-1.695 2.335-17.295 22.88-42.175 28.61-15.69 3.62-31.43 0.69-45.74-8.44-1.533-0.8-3-1.76-4.372-2.875-30.892-25.18-60.482-53.175-87.98-83.22-25.205-27.545-48.562-56.715-69.445-86.67-0.858-1.237-1.603-2.547-2.223-3.902-10.597-23.097-11.705-43.572-3.283-60.812 11.04-22.607 33.825-28.61 35.955-29.1 2.455-0.63 9.96-2.538 16.465-14.92 13.862-26.42 11.43-74.4-6.2-122.215-26.652-72.335-78.575-119.007-107.682-112.3-1.145 0.31-2.235 0.76-3.292 1.245-1.905 0.835-3.908 1.427-5.962 1.795-28.062 4.72-52.137 15.965-70.785 33.152-92.912 85.777-36.505 305.654 123.165 480.141 128.205 140.11 294.584 220.249 404.619 194.895 24.03-5.535 44.56-16.025 61.01-31.225 18.15-16.77 32.815-41.595 40.6-66.98 0.66-2.145 1.52-4.81 2.645-9 7.385-27.38-31.775-81.15-99.855-113.23-39.045-18.405-78.925-25.57-106.715-19.17C609.268 631.288 597.133 636.113 593.493 646.688zM653.488 446.834c-14.005 0.62-25.87-10.2-26.49-24.205-0.46-10.005-4.775-19.232-12.165-25.96-7.385-6.755-16.96-10.222-26.96-9.772-13.995 0.645-25.865-10.195-26.495-24.2-0.64-14.005 10.175-25.857 24.195-26.505 23.545-1.075 46.09 7.105 63.49 22.987 17.395 15.902 27.565 37.622 28.63 61.155 0.56 12.43-7.91 23.19-19.62 25.885C656.598 446.559 655.053 446.761 653.488 446.834zM736.648 425.799c-14 0.643-25.87-10.195-26.505-24.205-2.59-57.415-51.405-102.017-108.83-99.427-13.985 0.642-25.86-10.202-26.485-24.185-0.635-14.002 10.245-25.867 24.205-26.502 85.375-3.865 157.965 62.455 161.81 147.842 0.57 12.425-7.905 23.162-19.615 25.86C739.753 425.524 738.208 425.726 736.648 425.799zM838.598 430.764c-14.01 0.62-25.865-10.225-26.5-24.21-2.6-57.475-27.425-110.5-69.9-149.322-42.48-38.8-97.53-58.742-155-56.137-14.005 0.62-25.87-10.2-26.5-24.205-0.625-14.007 10.23-25.865 24.2-26.5 71.025-3.21 139.045 21.425 191.529 69.377 52.495 47.947 83.165 113.467 86.37 184.492 0.555 12.432-7.915 23.17-19.62 25.867C841.693 430.466 840.168 430.686 838.598 430.764z" p-id="10045" fill="red"></path>
</svg>

Direkt finden Innen ausfüllen Ändern Sie einfach den Farbwert im Attribut

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung von SVG in CSS-Hintergrundbildern (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!