在CSS背景圖片中使用svg的用法介紹（附範例）

這篇文章帶給大家的內容是關於在CSS背景圖片中使用svg的用法介紹（附範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

在CSS背景圖片中使用SVG，可以使用css background屬性的諸多特性，例如圖片尺寸和圖片位置等等。可以非常輕鬆的根據設備的尺寸來控制圖片的尺寸，還有一個好處就是可以不用把SVG圖片插入到html中，從而保持html的整潔。

在CSS背景圖片中使用SVG，有很多的優點，對提高效能也是有很大幫助的。那在CSS背景圖片中使用SVG，有什麼方法可以改變它的顏色呢？接著看。

CSS mask

使用CSS中mask來改變背景顏色，這個方法簡單實用，重要的是現在瀏覽器對它的支援越來越好。 mask屬性可以用來根據元素的輪廓來建立一個遮罩，使用遮罩可以只顯示指定圖片內容的區域，而圖片區域以外的則是隱藏的。以下是它的使用方法：

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

mask還有很多的屬性，例如mask-position、mask-repeat和mask-size，它們跟CSS中背景圖片的對應屬性的使用方法都差不多，也可以像background一樣來使用簡寫語法：

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

瀏覽器對mask的支援也越來越好。可以透過下面的網址來看看各個瀏覽器對它的支援：

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

此外不限於在css中修改的話，可以直接修改svg原始檔

把svg圖片拖曳到編輯器裡可以看到svg原始碼

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" " 
<svg t="1540202401705" class="icon"  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>

直接找到裡面的 fill 屬性修改裡面的色值就行了

以上是在CSS背景圖片中使用svg的用法介紹（附範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！