<image>

構文

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

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

解説

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

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

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

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

• 指定された寸法に幅と高さの両方が定義されている場合は、その値が実際の寸法に使われます。
• 指定された寸法に幅と高さのどちらかのみが定義されている場合は、もう一方の値は、画像自身の比率、指定値が一致するなら画像の内在的な寸法、既定のオブジェクトの寸法の値の何れかを使用して決められます。
• 指定された寸法が幅も高さも定義していない場合は、実際のオブジェクトの寸法は、画像自身の縦横比に一致し、かつ既定のオブジェクトの寸法をどちらの方向にも超過しない値が計算されます。画像自身の縦横比がない場合は、適用されるオブジェクト自身の縦横比が使用されます。このオブジェクトにも縦横比が存在しない場合は、残りの幅または高さは既定のオブジェクトの寸法から取られます。

アクセシビリティ

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

• MDN WCAG を理解する, ガイドライン 1.1 の解説
• Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0

形式文法

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>  

例

有効な画像

url(test.jpg)               /* <url>、但し test.jpg は実在する画像 */
linear-gradient(blue, red)  /* <gradient> */
element(#real-id)            /* element() 関数で参照されるウェブページの一部、
                               ページ上に "real-id" が実在する 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)
                            /* 様々な解像度による画像の選択 */

無効な画像

no-url.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) /* 画像セット内の画像はすべて異なる解像度でなければならない */

仕様書

ブラウザーの互換性

関連情報

• <gradient>
• element()
• image()
• image-set()
• cross-fade()