Question

我想知道如何在“背景”上使用SVG？不要将SVG“用作”背景。

我的div有css代码和背景颜色。但是当我导入SVG时，背景会变成白色。 SVG是否覆盖背景颜色？

有没有办法可以导入它而不影响背景但保持SVG形状？

    background: -webkit-linear-gradient( #EAFEFF, #DFF3FF);
background: -moz-linear-gradient( #EAFEFF, #DFF3FF);
border: 1px solid #000;
 -webkit-border-radius:10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-image: url(SVG/revenue_icon.svg), none;
background-size: 100%;
width: 92%;
height: 92%;
margin: 1px 1px;

SVG：

    <?xml version="1.0" encoding="utf-8"?>
<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="0 0 150 150" style="enable-background:new 0 0 150 150;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#05415B;} 
</style>
<g id="XMLID_94_">
    <path id="XMLID_122_" class="st0" d="M102.1,32.7H47.9c-4,0-7.2,3.2-7.2,7.2v70.1c0,4,3.2,7.2,7.2,7.2h54.2c4,0,7.2-3.2,7.2-7.2
        V39.9C109.3,36,106.1,32.7,102.1,32.7z M75.1,101.1L61.5,76.2l7.7-0.2V48.9h12.7v26.9l8-0.2L75.1,101.1z"/>
</g>
</svg>

提前谢谢

Answer 1

（背景）css中的渐变被视为背景图像（css-tricks），因此您在此处覆盖渐变，background-image：url（SVG / revenue_icon.svg），none;

你可以这样做：

.container::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(SVG/revenue_icon.svg) no-repeat;
}

SVG覆盖我的背景颜色

1 个答案: