0

我正在尝试使用 svg 图像作为图片背景创建跨浏览器宝丽来效果，如下所示 http://www.sitepoint.com/examples/svg/gallery.php

如果您使用的是 IE9，您首先应该注意到问题 - svg 背景在 IE 中的旋转方式不同。问题仅出现在 IE 中，并且似乎与 background-size 属性有关。如果我切换 IE 背景大小并旋转属性，IE 就会开始正确显示所有内容！

有人有解决这个问题的方法吗？

我正在使用的 CSS：

.image img {

    border: 0px solid #000;
    background-color: #fff;
    height:275px;
    background: url(/test/images/polaroid.svg);
    -moz-background-size: 100% 100%;
    background-size: 100% 100% ;
    margin: 25px auto 45px 35px;
    display:inline-block;
    padding:4% 5.5% 6% 4%;
    list-style: none;
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);

}

我在这里只谈论IE9！对于 7 和 8，我正在使用 progid:DXImageTransform.Microsoft.Matrix

4

1 回答 1

0

如果您使用 SVG 作为背景 - 所以您可以在 SVG 上制作所有内部图片。对于 IE8-使用svgweb。

用于transform="rotate(-30)"在<image>SVG 内部进行旋转。

所以，在每个<li>你都会有 SVG。它将在所有浏览器中同样有效。

于 2012-07-09T08:24:57.427 回答