Question

我正在尝试使用SVG文件作为我的背景，似乎无论我尝试什么，我都无法在IE中正确覆盖它。它总是使物品的中心位于每侧的大量空间。在firefox和chrome中，它运行得很好。我的代码如下（我正在使用bootstrap FYI）：

 <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="pull-left header-fix" runat="server" href="~/"><img src="/images/nait_logo_header.png" alt="nait logo" height="40"/><span style="margin-left:10px;"></span>Pathways<%--<i aria-hidden="true" class="glyphicon glyphicon-home" style="font-size:medium; opacity:0.6;"></i> --%></a> 
                    <a href="~/"></a>
                </div>
     .......
</div>

CSS：

.navbar-inverse {
  background:url(../images/header_bg.svg) no-repeat;
  background-size: cover;
  background-color: #FFF;
  border-color: #085157;
  border-bottom: 2px solid #085157;
  -webkit-box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.20);
  -moz-box-shadow:    0px 3px 2px 0px rgba(0, 0, 0, 0.20);
  box-shadow:         0px 3px 2px 0px rgba(0, 0, 0, 0.20);

  /*Tried this, doesnt work.
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/header_bg.svg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/header_bg.svg', sizingMethod='scale')";*/

}

我也试过background: url(../images/header_bg.svg) no-repeat center center fixed; 但似乎只是炸毁了svg。

SVG背景封面在IE中不起作用

0 个答案: