Home > Web Front-end > HTML Tutorial > How to use svg in background-image how to change color

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

一个新手
Release: 2018-05-15 14:22:35
Original
5041 people have browsed it

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;}
Copy after login

HTML :

<i class="icon-del"></i>
Copy after login

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>
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template