火狐浏览器中的SVG背景

Question

我在为我的朋友的网站工作，但是我无法弄清如何在Firefox中正确显示SVG。在Edge浏览器中，当我调整浏览器大小时，它也会消失。

http://lene.isreborn.com/

CSS - （我必须使用important，因为它是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>

- Kevin Sass

---

“显示SVG正确”是什么意思？包括屏幕截图和详细描述所需的结果将有助于可视化您的问题。 - Terry

我已经想通了，我的答案在下面。- 谢谢 :) - Kevin Sass

“（我必须使用important，因为这是WordPress）”- 你的意思是你不知道更好的方法吗？比如说专业性？ - CBroe

Answer 1

我现在明白了： background-size属性不适用于'contain'，而是使用100% 100%， 请参考 Mozilla背景规则
开发者网站链接： 点击这里

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;
}

- Kevin Sass

Answer 2

实际上，这张图片是白色的，对吧？如果你把填充颜色改为 #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/

- turbopixel

---

它只是黄色的，以便看到它在哪里...但是，实际颜色是白色。 :) - Kevin Sass