html - 如何应用 SVG 使其在 IE 背景图像中工作

Question

我的问题与 this post 中的问题讨论类似。背景图像适用于所有其他浏览器，包括 IE10，但不适用于 IE10 以下的浏览器。读完那篇文章后，我为下面的 IE10 创建了 SVG 格式的背景图像。现在，我不知道如何将其应用到我的 CSS 中。

CSS

.bg-secondary { 
        background: url(../img/design/bg-secondary.jpg) no-repeat top center; 
      -webkit-background-size: 100% auto;
      -moz-background-size: 100% auto;
      -o-background-size: 100% auto;
      background-size: 100% auto;
      min-height: 605px;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/design/bg-secondary.svg', sizingMethod='scale');
    }

Answer 1

您可以在此处使用具有多个背景的 CSS 技术:

  .bg-secondary {
  background-image: url(fallback.png);
  background-image: url(image.svg), none;
  -----
  -----  
  }

This works because it just so happens that the browser support for SVG and multiple-backgrounds is very similar. If multiple backgrounds is supported, the browser will use the second declaration (with SVG), otherwise fall back to the first declaration (with PNG).

更新:

<svg width="--" height="--">
  <image xlink:href="your.svg" src="svg.png" width="--" height="--" />
</svg>