我在页面的各个部分之间创建了一个过渡,我希望尽可能保持结构化。现在的问题是背景图像在 IE9、IE10 和 IE11 上不重复(测试了这些)
过渡样式:
.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(较新版本)
最佳答案
当我之前必须实现这一点时,我找到了 this邮政。它声明如下:
For whatever reason, Internet Explorer 10 does not support the repeating of SVG-based background images out of the box.
但是可以解决这个问题:
We need to make Internet Explorer 10 preserve the aspect ratio by slicing the image accordingly. For this to happen,
preserveAspectRatio="none slice"
should be added to the<svg>
like so:
<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 拉伸(stretch)到屏幕的长度,因为 background-size
宽度设置为 100%
.
因此您需要设置 background-size
到您希望重复的图像的大小。例如,当我测试时,我设置了 background-size
成为40px 50px
这将 svg 设置为 40px x 50px 图像,然后在 div 的宽度和高度上重复它。
关于css - 为什么背景图像在 ^IE9 上不重复,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40401022/