2012-07-09 64 views
0

我真的尝试使用SVG图像作为画面的底色来创建跨浏览器的宝丽来的效果看这里 http://www.sitepoint.com/examples/svg/gallery.phpSVG背景在IE不同的旋转

如果您使用IE9,你应该注意到,在第一次看的问题 - SVG背景在IE中旋转方式不同。问题只出现在IE中,似乎与后台大小的属性有关。如果我在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

回答

0

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

对于旋转使用transform="rotate(-30)"在里面的SVG。

因此,在每个<li>你将有SVG。它将在所有浏览器中同样工作 。