SVG覆蓋我的背景顏色

我想知道如何在背景上使用SVG「on」？不要使用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>

預先感謝您

來源

2015-10-01 Metalbreath

我的猜測是有東西在你的SVG添加白色背景，類似'fill'屬性，'補=「＃FFFFFF」'。 – hungerstar

這是可移動的，還是它只是一個壞的SVG文件，我做了？因爲如果我沒有弄錯SVG是行。所以他們應該有任何背景 – Metalbreath

它似乎有一個填充。但如果我將其更改爲none，它仍具有相同的背景 – Metalbreath

（背景）在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; 
}

來源

2015-10-01 14:20:42 VilleKoo

它的工作原理。現在你已經提到過了，我只注意到在我急着的時候，我在SVG的同類課程中壓倒了背景。新手錯誤。 – Metalbreath

很高興我能幫忙:) – VilleKoo

SVG覆蓋我的背景顏色

回答

相關問題