SVG 覆盖我的背景颜色

Question

我想知道如何使用 SVG "on" 作为背景？不使用 SVG "as" 背景。

我的 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

(background)css 中的渐变被视为背景图像 (css-tricks)，因此您在此处覆盖渐变，背景图像：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 覆盖我的背景颜色

SVG override my background color

html

javascript

css

svg

background-image