How to use svg in background-image how to change color

Conclusion

After many tests, I discovered that background-image uses svg and changing the color cannot be done at all.

Analysis

When the svg image is used as background-image, the color setting needs to be inside the svg to take effect . Setting the color style in external CSS is invalid. This can actually be explained from the CSS selector. The CSS selector must select the DOM element, but the svg is made into a background image and is not introduced as an element, so it is not introduced externally. Can't set color.

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="图层_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>

The above is the detailed content of How to use svg in background-image how to change color. For more information, please follow other related articles on the PHP Chinese website!