<image>

概要

CSS の <image> データ型は、2 次元の画像を表現します。CSS では画像は 2 種類あります。URL を使って参照されることの多いごく普通の静的な画像と、グラデーションや木構造の一部分を表現するような動的に生成された画像です。

CSS はさまざま種類の画像を扱えます:

• 自然なサイズである、固有の (intrinsic) 寸法のある画像。例えば jpeg 画像は決まった寸法を持っています。
• 固有の寸法が複数ある画像。ファイル内に複数のバージョンを持っています。一部の .ico 形式が該当します。この場合、包含ボックスのものに最も近いアスペクト比を持つ、最大の画像の寸法が、固有の寸法として使われるでしょう。
• 固有の寸法を持たないが、幅・高さの固有のアスペクト比のある画像。ベクター画像、例えば SVG 形式が該当します。
• 固有の寸法がなく、固有のアスペクト比もない画像。例えば CSS のグラデーションです。

CSS は正しいオブジェクトサイズを、次の値から判断します。画像固有の寸法、CSS の width、height、background-size プロパティで定義された指定サイズ、画像を使うオブジェクトが定義するデフォルトのオブジェクトサイズ（以下）:

正しいオブジェクトサイズは、次のアルゴリズムを使って計算されます:

• 指定サイズに幅と高さの両方が定義されていれば、その値が実際のサイズに使われます。
• 指定サイズに幅と高さのどちらか片方が定義されていれば、欠けている値は次のいずれかで決められます。画像固有の比率、指定値がマッチするなら画像固有の寸法、デフォルトのオブジェクトサイズの値。
• 指定サイズが幅と高さを定義していないときは、画像固有のアスペクト比にマッチし、デフォルトオブジェクトサイズをどの方向にも超過しないような値が計算され、実際のオブジェクトサイズに使われます。画像に固有のアスペクト比がないときは、画像が用いられるオブジェクト固有のアスペクト比が使われます。オブジェクトが固有のアスペクト比を持たないときは、欠けた幅や高さはデフォルトオブジェクトサイズからとられます。

画像は非常にたくさんの CSS プロパティで使うことができます。例えば、background-image、border-image、content、list-style-image、cursor などです。

構文

CSS の <image> データ型は、次のいずれかを表します:

• CSS の <uri> データ型と url() 関数で表される画像
• CSS の <gradient>
• element() 関数で定義される、ページの一部を画像化したもの

例

有効な <image> 値です:

url(test.jpg)                          url()関数。test.jpg が画像である限りは有効です
linear-gradient(to bottom, blue, red)  <gradient> データ型で示されたグラデーションです
element(#colonne3)                     element() 関数で画像化された、ページの一部です。
                                       colonne3 が そのページに実在する CSS id である限りは有効です

無効な <image> 値です:

cervin.jpg                             画像ファイルは url() 関数を使って定義する必要があります
url(report.pdf)                        url() 関数に渡すファイルは画像でなければなりません
element(#fakeid)                       fakeid が、そのページに実在しない CSS id である場合

仕様

ブラウザ実装状況

関連情報

• CSS リファレンス
• CSS グラデーションの利用、<gradient>、linear-gradient(), radial-gradient()、repeating-linear-gradient()、repeating-radial-gradient()
• element()