Firefox中的SVG背景

在我的朋友的網站上工作，我無法弄清楚如何在Firefox中顯示SVG。在邊緣它也消失，而我正在調整瀏覽器。Firefox中的SVG背景

http://lene.isreborn.com/

CSS - （我不得不使用非常重要，因爲它是WordPress的）：

header::after { 
    content:""; 
    display: block; 
    background: url(/svg-filer/header-background.svg); 
    background-size: contain; 
    background-repeat: no-repeat; 
    top: 0; 
    left:-1%; 
    width: 102% !important; 
    height: 90px !important; 
    position: absolute; 
    z-index: -1; 

    -ms-transition: top ease .5s; 
    -moz-transition: top ease .5s; 
    -webkit-transition: top ease .5s; 
    transition: top ease .5s; 
} 

header.sticky-active::after { 
    top: -20px; 
}

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="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="100%" height="90px" viewBox="0 0 1920 90" preserveAspectRatio="none">  
    <polygon id="XMLID_3_" fill="#FFFF00" points="1,99.7 1399.2,130 1921,99.7 1921,0 1,0 "/> 
    </svg>

來源

2016-10-20 Kevin Sass

你是什麼意思通過「顯示SVG權利」？包括屏幕截圖和所需結果的詳細描述將有助於將您的問題形象化。 – Terry

我明白了，我的答案在下面。 - 謝謝:) –

_「（我必須使用重要的，因爲它是WordPress的）」_ - 你的意思是你不知道更好？例如關於特異性？ – CBroe

的圖像實際上是白色的，對不對？如果您更改填充顏色爲＃000，你會看到圖像：

<polygon id="XMLID_3_" fill="#000" points="1,99.7 1399.2,130 1921,99.7 1921,0 1,0 "/>

https://jsfiddle.net/fbwsh1pf/

來源

2016-10-20 11:29:49 Nico

只有黃色才能看到它的位置......但是，真正的顏色是白色的。 :) –

我知道了現在：背景大小不以「包含」工作，但100％100％，見 Mozilla Background rules
鏈接到開發者網站：See here

header::after { 
    content:""; 
    display: block; 
    background: url(/svg-filer/header-background.svg); 
    background-size: 100% 100% !important; 
    background-repeat: no-repeat; 
    top: 0; 
    left:-1%; 
    width: 102% !important; 
    height: 90px !important; 
    position: absolute; 
    z-index: -1; 

    -ms-transition: top ease .5s; 
    -moz-transition: top ease .5s; 
    -webkit-transition: top ease .5s; 
    transition: top ease .5s; 
} 

header.sticky-active::after { 
    top: -20px; 
}

來源

2016-10-20 12:31:58

Firefox中的SVG背景

回答

相關問題