为什么背景图片在^ IE9上不重复

Question

我在页面上的各个部分之间创建了一个过渡，我想尽可能地保持结构化。现在的问题是背景图像在IE9，IE10和IE11上没有重复（对它们进行了测试）

转换的CSS：

.transition {
    position:absolute;
    z-index: 100;
    width:100%;
    height: 50px;
    background-size: auto 100%;
    background-repeat: repeat-x;
    bottom:-1px;
    background-image: url(../img/transition.svg);
}

确实适用于Safari，Chrome，Firefox（更新版本）

Answer 1

当我以前必须做到这一点时，我发现了这篇文章。它指出以下内容：

无论出于何种原因，Internet Explorer 10均不支持重复使用基于SVG的背景图像。

但是可以解决此问题：

我们需要使Internet Explorer 10通过相应地切片图像来保留长宽比。为此， preserveAspectRatio="none slice"应将其添加到以下代码中<svg>：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 149 50" enable-background="new 0 0 149 50" xml:space="preserve" preserveAspectRatio="none slice">

（IE 9和IE 11也是如此）

在IE9（我一直在使用的浏览器）中，这将svg扩展到屏幕的整个长度，因为background-size宽度设置为100%。

因此，您需要将设置为background-size希望重复的图像尺寸。例如，当我测试，设置我background-size是40px 50px由50像素图像此集合中的SVG至40像素，然后重复它横跨div的宽度和高度。