Question

设置背景位置适用于Chrome，Safari和Firefox，但不适用于IE 8-11。这里有什么问题？

.logo {
    display: block;
    width: 200px;
    border: 2px solid red;
    background: url("layout/logo.png") center right no-repeat; /* fallback image */
    background-image: url('data:image/svg+xml;base64,...'), none; /* two bg to only use svg on supported browsers. IE 11 uses this image */
    background-position: center right;
    background-repeat: no-repeat;
    background-size: auto 100%;
}

更新：

IE似乎忽略了SVG图像上的背景定位。这是WORKAROUND DEMO

Answer 1

我认为保证跨浏览器工作的最佳方法是使用模式制作背景图片，然后设置x，y，{{1}等属性或width通过height方法直接或稍后在jquery中定位它，例如：attr

$("#img1").attr("width","500");

并设置模式以填充SVG路径，如此

<defs>
   <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
       <image xlink:href="layout/logo.png" x="0" y="0" width="100" height="100" />
   </pattern>
</defs>

或者你可以用这种方式设置背景但是像这样的CSS

<path fill="url(#img1)" id="my_svg" d="M5,50 l0,100 l100,0 l0,-100 l-100,0
     M215,100
     a50,50 0 1 1 -100,0 50,50 0 1 1 100,0
     M265,50
     l50,100 l-100,0 l50,-100
     z"/>

还有一种替代方式，我不推荐但在某些情况下可能是答案，而且模式中的图像是#my_svg{ fill:url(#img1); }或transform="translate(x,y)"用于退出的模式，如果它就像css版本那样......例如：

patternTransform="translate(x,y)"

无论如何，总是有很好的做法可以让我们知道在工作中做很多事情的不同方式能够生存下去; - ）

背景位置未在IE上应用

1 个答案: