<image>

<image>CSSデータ型で、二次元の画像を表現します。

構文

<image> データ型は以下のいずれかによって表すことができます。

  • <url> データ型で記述された画像
  • <gradient> データ型
  • element 関数で定義されたウェブページの一部
  • image() (en-US) 関数で定義された画像、画像フラグメント、単色の色
  • cross-fade() 関数で定義された2つ以上の画像の合成
  • image-set() 関数で定義された、解像度に基づいて定義された画像の選択

解説

CSS はさまざま種類の画像を扱うことができます。

  • JPEG や PNG やその他のラスタ形式など、固有の寸法 (intrinsic dimensions) (自然の寸法) を持つ画像。
  • 一部の .ico 形式のように、単一のファイルの中に複数のバージョンが存在する、複数の固有の寸法を持つ画像。 (この場合、固有の寸法は領域に収まる最も大きな画像であり、かつアスペクト比が包含ボックスに最も近いものになります。)
  • SVG またはその他のベクター形式のように、固有の寸法を持たないが、幅と高さの間に固有のアスペクト比のある画像。
  • CSS のグラデーションなど、固有の寸法がなく、固有のアスペクト比もない画像。

CSS はオブジェクトの正しい寸法を、 (1) 固有の寸法、 (2) CSS の width, height, background-size などの CSS プロパティで定義された指定された寸法、 (3) 画像が使用されるプロパティの種類によって指定された、以下のような既定の寸法によって特定します。

オブジェクトの種類 (CSS プロパティ) 既定のオブジェクトの寸法
background-image 要素の background の置かれる領域の寸法
list-style-image 1em の文字の寸法
border-image-source 要素の境界画像領域の寸法
cursor クライアントのシステムにおける通常のカーソルの寸法に合うブラウザーが定義した寸法
mask-image ?
shape-outside (en-US) ?
mask-border-source ?
@counter-style の symbols (en-US) 危険性のある機能です。対応している場合、クライアントのシステムでのカーソルの寸法に合わせたブラウザー定義の寸法です。
擬似要素 (::after または ::before) の content 300px × 150px の矩形

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

  • 指定された寸法に幅と高さの両方が定義されていれば、その値が実際の寸法に使われます。
  • 指定された寸法に幅と高さのどちらかのみが定義されていれば、欠けている値は次のいずれかで決められます。画像固有の比率、指定値がマッチするなら画像固有の寸法、既定のオブジェクトの寸法の値。
  • 指定された寸法が幅と高さを定義していないときは、画像固有のアスペクト比に一致し、既定のオブジェクトの寸法をどの方向にも超過しないような値が計算され、実際のオブジェクト寸法に使われます。画像に固有のアスペクト比がないときは、画像が用いられるオブジェクト固有のアスペクト比が使われます。オブジェクトが固有のアスペクト比を持たないときは、欠けた幅や高さは既定のオブジェクトサイズからとられます。
注: すべてのブラウザーがすべてのプロパティですべての種類の画像に対応しているわけではありません。詳細はブラウザーの互換性の節をご覧ください。

アクセシビリティの考慮

ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。

有効な画像

url(test.jpg)               /* <url>、但し test.jpg は実在する画像 */
linear-gradient(blue, red)  /* <gradient> */
element(#realid)            /* element() 関数で参照されるウェブページの一部、
                               ページ上に "realid" が実在する ID である場合 */
image(ltr 'arrow.png#xywh=0,0,16,16', red)
                            /* arrow.png が対応している画像であれば、 <url> の元画像の
                               左上から 16x16 を選択し、そうでなければ赤一色の見本になります。
                               言語が右書きの場合は、画像は水平方向に反転します。 */
cross-fade(20% url(twenty.png), url(eighty.png))
                            /* 多重露光の画像で、 twenty が 20% の露光で、
                               eighty が 80% の露光になる */
image-set('test.jpg' 1x, 'test-2x.jpg' 2x)
                            /* 様々な解像度による画像の選択 */

無効な画像

nourl.jpg            /* 画像ファイルは url() 関数により示す必要がある */
url(report.pdf)      /* url() 関数で指すファイルは画像でなければならない */
element(#fakeid)     /* 要素 ID はページ上に実在する ID でなければならない */
image(z.jpg#xy=0,0)  /* 空間フラグメントは xywh=#,#,#,# の書式で書かなければならない */
image-set('cat.jpg' 1x, 'dog.jpg' 1x) /* 画像セット内の画像はすべて異なる解像度でなければならない */

仕様書

仕様書 状態 備考
CSS Images Module Level 4
<image> の定義
草案 Adds element(), image() (en-US), image-set(), conic-gradient, repeating-conic-gradient() (en-US), image-resolution (en-US) を追加
CSS Images Module Level 3
<image> の定義
勧告候補 初回定義。これ以前は <image> データ型の明示的な定義はなし。画像は url() 関数記法でしか定義できなかった

ブラウザーの互換性

BCD tables only load in the browser

関連情報