css - 背景位置不适用于 IE

Question

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

DEMO on Dabblet

DEMO on Webdevout

.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、width 或 height 直接或稍后通过 attr 方法在 jquery 中根据需要定位它，例如:$("#img1").attr("宽度","500");

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

并设置图案以像这样填充 SVG 路径

<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"/>

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

#my_svg{
    fill:url(#img1);
}

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

   <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100" patternTransform="translate(0,0)">
       <image xlink:href="layout/logo.png" x="0" y="0" width="100" height="100" transform="translate(0,0)" />
   </pattern>

无论如何，在我们的工作中了解许多不同的做某事的方法总是很好的做法，以便能够生存;-)