CSS属性の詳しい説明 image-redering_html/css_WEB-ITnose

何?

image-rendering は、この段階ではまだ 実験的な性質 にある CSS 属性であり、その機能は、ブラウザーが画像を拡大縮小するときに、最終的な Desired を取得するために使用されるアルゴリズムを設定することです。画像の結果。そして、この属性は img、canvas、background-image に適用できます。

注意

この属性はすべてのブラウザでサポートされているわけではないため、この記事ではこの属性を記事内で直接適用していますので、この記事を読む際は最新バージョンのブラウザを使用してください

使用方法

image{   image-rendering:auto;}

そのオプションの値があります

auto

は、画像の色をスムーズにスケーリングするデフォルトのアルゴリズムを使用します。 ブラウザごとに、次のような異なるアルゴリズムが使用されます。 Firefox 3.0 以降の gecko は、双線形補間アルゴリズムを使用します

鮮明なエッジ

コントラストを維持するアルゴリズムを使用します。ブルーミング中にエッジとエッジを強調し、処理中に色を滑らかにしたりブラーを使用したりしないでください

ピクセル化

写真を拡大するときは、単にピクセルを拡大するだけで、ズームアウトしたときの効果は自動と同じです

デモ

ピクセル化

まずは主人公を紹介しましょう！

見ましたか？これが主人公で、サイズが 2*2 ピクセルの写真です...

(写真マスター: 悪魔が私をこんなに小さくするように設計したのです。急いで私を大きくしなければ、あなたを切ります!)

さて長兄が話したのに弟はできない 命令に背いて、お兄さんに1分ごとに幅400pxを追加しました

でもズームインすると...

(私: お兄さん、これでもあなたですか?

(写真家: 本当にくそー! 私に何をしたの?)

(私: 兄弟、それは私のせいではありません。ズームすると、ブラウザはデフォルトのアルゴリズムを使用して色を滑らかにしましたで...実際、それはまだきれいです！を属性に追加しました: ピクセル化

(私: これはお兄さんです)

(写真の人: 今回はいいです、私は私です、違う色の花火です)

兄貴の役割からピクセル化を学びましたが、実際のその役割は何ですか?

たとえば、zhiyishou.comというコンテンツのQRコードがあります。そのサイズは50px*50pxです

QRコードは小さくありませんが、強くなった後のQRコードよりもはるかに小さくなります。ジュンも私のところに来て、お兄さんに似せるために整形したいと言いました

それで、直接拡大するとこんな感じになりました

これ…あなたの英雄的なシルエットはどこですか？よく考えたら兄の病気と同じだ

何も言わずに覚えたばかりのドット絵を直接QRコードのやつに追加しました

これがイケメンのQRコードのやつです！ ！

クリスプエッジ

w3c 公式ウェブサイトからゲストを招待して、一緒にクリスプエッジの使用法をデモンストレーションしました:

ゲストを拡大しました:

これは通常のゲストです。結果として、カラー スムージングに自動を使用した場合でも、ビンジさんにピクセル化を使用して、何が起こるか見てみましょう。

ビンジさんは少しせっかちなので、すぐに鮮明なエッジを追加します。効果を確認してください (さまざまなブラウザでのこの属性のサポートは均一ではないため、個別に設定する必要があります)

img{    width: 400px;    image-rendering: -moz-crisp-edges;         /* Firefox */    image-rendering: -o-crisp-edges;         /* Opera */    image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */    image-rendering: crisp-edges;    -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */}

ゲストのエッジが最初のように滑らかになっていないことがわかります。独自のエッジがありますが、画像全体がぼやけているため、上のピクセル化された画像ほどシャープなエッジではありません。

このエフェクトは画像をズームするときに効果を最適化できますが、ピクセル化のアプリケーションシナリオとは異なります。

最後に

この属性の最も実用的な属性はピクセル化されていると思います。この属性の使用に関しては、特定の効果を実現するために

絶対に依存することはできません。これを使用できるのは、特定の効果を最適化するためだけです。この属性は新しすぎて、chrome41 で chrome に表示され、chrome は現在クリスプエッジ値をサポートしていません

Chrome     |   ? 41+Safari     |   * 7.1+Firefox    |   * 35+Opera      |     28+IE         |     NopeAndroid    |     NopeiOS        |   * 7.1+? Supports pixelated but not crisp-edges* Supports crisp-edges but not pixelated

Reference

image -MDN でのレンダリング

画像 - W3C でのレンダリング画像 - レンダリング記事

Finish.