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

这很有效，因为浏览器支持SVG 和多背景非常相似。如果有多个背景支持，浏览器将使用第二个声明（使用SVG），否则回到第一个声明（使用PNG）。

<强>更新

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

Answer 2

尝试这个，如果它有帮助......

<svg  height="--px" width="--px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                            <image width="100%" height="100%" xlink:href="imagefilehere.svg"/>
                                    </svg>

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

2 个答案: