html - 使用 SVG 作为 的背景图片

Question

我正在尝试使用 SVG 作为列表中元素的背景图像，但它不起作用。我不确定是我还是 SVG 本身。

这是我的导航代码

     <nav>
        <ul>
         <li class="completed"><a href="#">Exam</a> <i class="fa fa-check-circle"></i></li>
         <li><a href="#">Personal <i class="fa fa-times-circle"></i></a></li>
         <li><a href="#">Employment</a></li>
         <li><a href="#">Appointment</a></li>
         <li><a href="#">Record Check</a></li>
         <li><a href="#">Submit</a></li>
        </ul>
     </nav> 

这是我尝试应用 SVG 的代码

nav > ul > li > a {
    display: inline;
    /*background-color: white;*/
    color: rgba(119, 119, 119, 0.59);
    background: url(../images/navPill.svg);
    background-size: cover;
}

这是 SVG 的链接

http://expirebox.com/download/13169ec086d8af7dd7ad4e5fe3f2d1ad.html [现在坏了]

Answer 1

您可能想使用 background-size: contain 而不是 cover 来使箭头适合每个链接。但是，当您使用 contain 并且 svg 缩小时，细箭头线太暗而看不到。

这是一个工作示例。我只是将 cover 更改为 contain 并为箭头添加了黑色填充，以便您可以看到它:

http://jsfiddle.net/68j04n3j/