サウウェブ

映画、海外ドラマ、スケボー、車、B'z、BUMPのブログ

WEB

CSS Transformsで画像がぼやける、ちらつく時の対処法

2017/09/21  |  3,622 views

PC,ブログ、パソコン、キーボード

CSSのTransformsを使ったときに画像がぼやけるときありませんか?マウスオーバーで画像が拡大表示されるやつとか!ぼやけたり、ちらつく時にコードをたすだけで画像が綺麗に表示されます。そもそもこういうコード書かずに綺麗に表示されたらいいんですけど

 

追記するCSSのコード

backface-visibility:hidden;
-webkit-backface-visibility: hidden;

 

スポンサーリンク

デモ作りました

backface-visibilityの指定があるとき

  • 写真、カラフル
  • 写真、カラフル
  • 写真、カラフル
  • 写真、カラフル

 

おまけ

”image-rendering”のコード

-ms-interpolation-mode: nearest-neighbor;   /* IE8+ */
  image-rendering: -webkit-optimize-contrast; /* Safari (WebKit) */
  image-rendering: -moz-crisp-edges;          /* Firefox (Gecko) */
  image-rendering: -o-crisp-edges;            /* Opera 12.x */
  image-rendering: pixelated;                 /* Chrome 41+, Opera 29+ (CSS4) */

 

この記事が気に入ったら
いいね ! しよう

-WEB