6

回転している背景画像を持つ div があります。以下は、それをローテーションするための私の CSS ルールです。

#services_parallax { 
-webkit-transform:rotate(3.1deg); /* Webkit */
transform: rotate(3.1deg); /* firefox & IE9+ */
/* IE7 & 8 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.998537, M12=-0.054079, M21=0.054079, M22=0.998537, sizingMethod='auto expand'); 
}

問題は、IE では、画像のエッジが滑らかな線ではなく非常にブロック状でぎざぎざになっており、アンチエイリアス処理されていないように見えることです。誰かがこれの修正を知っていますか? -webkit-backface-visibility: hidden; を適用して修正を適用するまで、クロムで実行していました。これはクロムでうまく機能しましたが、IEに同様の修正があれば必要です。

この問題を再現するには、次を HTML ファイルに貼り付けて、IE で確認します。

<style type="text/css"> 
#services_parallax { -webkit-transform:rotate(3.1deg); /* Webkit */ 
    transform: rotate(3.1deg); /* firefox & IE9+ */ 
    /* IE7 & 8 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.998537, M12=-0.054079, M21=0.054079, M22=0.998537, sizingMethod='auto expand'); 
    background: url(http://img.netcarshow.com/Pagani-Zonda_R_2009_1600x1200_wallpaper_01.jpg) center center; 
    background-size:100% auto; 
    height:100px; 
    width:700px; 
    margin-top:50px; 
    margin-left:50px; 
} 
</style> 
<div id="services_parallax"></div>
4

3 に答える 3

3

CSS (IE11、10、および 9) で高さと幅が強制されている場合、アンチエイリアスは大きな画像では機能しません。いくつかの (非常に) おおよそのテストを行い、1000px 未満のアンチエイリアシング作業を控除しました。

この問題の公式ソースをまだ探しています。

于 2013-12-04T11:28:46.330 に答える
2

@ geoffs3310、あなたの痛みを感じます。

これは IE11 やその他のブラウザー (iPad と Chrome の Safari、Samsung Galaxy Tab A の既定のブラウザー) では依然として問題であることがわかりました。これを回避するために、背景画像を含む要素に暗い背景色を適用しました。理由はわかりませんが、うまくいくようです。

background-color: black;

And in case anyone else reads this post, allow me to put forward a few other fixes I found in dealing with the various issues arising from skewing content. Note, these are all applied to the transformed container element.

Eliminates the jagginess buttons get after skew rotations are applied (kudos):

transform-style: preserve-3d;

Eliminate blurry where <canvas> has been used (kudos to Zoltan). Note, if there are other transforms on the element declare them on separate lines rather than shorthand (from memory this was to work around a similar Safari issue):

transform: perspective(0);

And another fix—though my documentation lacks what it fixes, I think it was to do with janky or blurry content in IE—try:

outline: 1px solid transparent;
于 2016-02-28T21:49:59.780 に答える