How does background-image use svg to change the color,

How does background-image use svg to change the color,

Conclusion

After multiple tests, I found that the background-image uses svg, and there is no way to change the color.

AnalysisWhen an svg image is used as a background-image, the color setting takes effect only within the svg. Setting the Color Style in the external CSS is invalid. This can be explained from the CSS selector. the CSS selector must select the DOM element, but svg is made into a background image and is not introduced as an element, therefore, the color cannot be set externally.

Example

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 = "layer _ 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; "xml: space =" preserve "> <title> Delete group members </title> <desc> Created with Sketch. </desc> <g id = "Page-1"> <g id = "group business card member _ x28 _ administrator _ x29 _" transform = "translate (-284.000000, -249.000000) "> <g id =" Group-19 "> <g id =" Group-14 "transform =" translate (20.000000, 120.000000) "> <g id =" group member-copy-4 "transform =" translate (0.000000, 121.000000) "> <g id =" Delete Group member "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.4, 1, 1S-680.4, 700-681,700 z "/> </g> </svg>