您好,登錄后才能下訂單哦!
這篇文章主要介紹在background-image中使用svg怎樣改變顏色,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
結(jié)論
在我多番測(cè)試之后,才發(fā)現(xiàn)background-image使用svg,改變顏色根本做不了。
分析
當(dāng)svg圖片被使用成background-image,顏色的設(shè)置需要在svg內(nèi)部才能生效。在外部CSS設(shè)置顏色樣式,卻是無(wú)效,這其實(shí)可以從CSS選擇器得到解釋,CSS選擇器必須選擇到DOM元素,而svg卻被做成背景圖,并沒(méi)有以元素引入,所以在外部也就設(shè)不了顏色。
例子
CSS:
i { display: inline-block; width: 100px; height: 100px; }.icon-del{ background-image: url(delete.svg); }.st0{fill:#EC665E;}.st1{fill:#FFFFFF;}
HTML:
<i class="icon-del"></i>
SVG:
<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-691 693 16 16" style="enable-background:new -691 693 16 16;" xml:space="preserve"><title>刪除群成員</title><desc>Created with Sketch.</desc><g id="Page-1"> <g id="群組名片成員_x28_管理員_x29_" transform="translate(-284.000000, -249.000000)"> <g id="Group-19"> <g id="Group-14" transform="translate(20.000000, 120.000000)"> <g id="群成員-copy-4" transform="translate(0.000000, 121.000000)"> <g id="刪除群成員" transform="translate(264.000000, 8.000000)"> <g id="Group" transform="translate(2.000000, 2.000000)"> <g id="Oval-9"> <circle class="st0" cx="-685" cy="699" r="6"/> </g> <g id="Path-2"> <path class="st1" d="M-681,700h-8c-0.6,0-1-0.4-1-1s0.4-1,1-1h8c0.6,0,1,0.4,1,1S-680.4,700-681,700z"/> </g> </g> </g> </g> </g> </g> </g></g></svg>
以上是“在background-image中使用svg怎樣改變顏色”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。