64

重複の可能性：
アンチエイリアシングなしで画像を引き伸ばす方法

画像を拡大するときにアンチエイリアスを無効にすることはできますか？

今、私はこのようなものを手に入れました：

私が得るもの

次のcssコードを使用します。

#bib {
    width: 104px;
    height: 104px;
    background-image: url(/media/buttonart_back.png);
    background-size: 1132px 1360px;
    background-repeat: no-repeat;
}

私が欲しいのは、このようなものです：

私が求めるもの

つまり、画像を拡大するときにアンチエイリアシングを無効にしてハードエッジを維持するCSSフラグ。

javascriptのハックなども歓迎します。

（はい、phpとimagemagickでもこれを実行できることは承知していますが、cssベースのソリューションをお勧めします。）

更新 以下が提案されています：

image-rendering: -moz-crisp-edges;
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;

しかし、それは背景画像では機能しないようです。

4

2 に答える 2

125

これを試してみてください。これは、すべてのブラウザーでそれを削除するための修正です。

img { 
    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
    image-rendering: -o-crisp-edges;            /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: pixelated; /* Chrome */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */

}

ソース:

http://nullsleep.tumblr.com/post/16417178705/how-to-disable-image-smoothing-in-modern-web-browsers

http://updates.html5rocks.com/2015/01/pixelated

ギターラボ

于 2012-12-28T10:37:24.437 に答える
8

Firefox のみで動作する CSS :

img { image-rendering: -moz-crisp-edges; }

それは私のために働いた（firefox 16.0） ここに画像の説明を入力

于 2012-12-28T10:32:02.307 に答える