0

ここで見られるように、画像の背景としてsvg画像を使用してクロスブラウザポラロイド効果を作成しようとしています http://www.sitepoint.com/examples/svg/gallery.php

IE9を使用している場合は、一見問題に気付くはずです。IEではsvgの背景の回転が異なります。問題は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を使用します。

SVG 内で使用transform="rotate(-30)"する回転の場合。<image>

したがって、すべて<li>に SVG があります。また、すべてのブラウザで同じように機能します。

于 2012-07-09T08:24:57.427 に答える