Question

我已在页面上的各个部分之间创建了转换，我希望尽可能保持这种结构。现在的问题是背景图像在IE9，IE10和IE11上没有重复（测试这些）

css of transtition：

.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

当我不得不实现此目的时，我发现了this帖子。它陈述如下：

无论出于何种原因，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，这将svg设置为40px x 50px图像，然后在div的宽度和高度上重复它。

Answer 2

我不确定IE是否能够重复使用svg。在您的SVG中，尝试添加：

preserveAspectRatio="none slice"

到<svg>代码。

为什么^ IE9上的背景图像不重复

2 个答案: