image()

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

<image-tags> = 
  ltr  |
  rtl  

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

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

ここで

image-tags省略可

画像の書字方向、左書きならば ltr、右書きならば rtl です。

image-src 省略可

0 個以上の <url> または <string> で、画像のソースをオプションの画像フラグメント識別子と共に指定します。

color 省略可

色であり、image-src が見つからなかったり、対応していなかったり、宣言されていなかったりした場合の代替として使用される単色の背景色を指定します。

image() 表記の最初のオプション引数は、画像の書字方向です。この引数が含まれている場合、画像が反対の書字方向を持つ要素で使用されると、横書きモードでは画像が水平に反転します。書字方向を省略した場合は、言語の方向が変わっても画像は反転しません。

url() と image() の大きな違いは、メディアフラグメント識別子（開始点の x 軸と y 軸、幅と高さ）を画像ソースに追加することで、ソース画像の一部分のみを表示することができることです。引数で定義された画像の範囲は、独立した画像になります。構文は次のようになります。

background-image: image("my-image.webp#xywh=0,20,40,60");

要素の背景画像は、画像 myImage.webp のうち、 0px, 20px の座標 (左上隅) から始まり、幅 40px、高さ 60px の部分になります。

#xywh=#,#,#,# というメディアフラグメントの構文は、カンマで区切られた 4 つの数値を取ります。最初の 2 つの値は、作成されるボックスの始点の X および Y 座標を表します。 3 つ目の値はボックスの幅、最後の値は高さです。既定では、これらはピクセル値です。メディア仕様書の spacial dimension definition によると、パーセント値にも対応しています。

xywh=160,120,320,240        /* 320x240 の画像を x=160 および y=120 の位置から使用 */
xywh=pixel:160,120,320,240 /* 320x240 の画像を x=160 および y=120 の位置から使用 */
xywh=percent:25,25,50,50    /* 50%x50% の画像を x=25% および y=25% の位置から使用 */

画像フラグメントは、 url() 記法でも使用できます。 #xywh=#,#,#,# というメディアフラグメントの構文は「後方互換」であり、メディアフラグメントが理解できない場合は無視され、 url() で使用してもソースの呼び出しが壊れることはありません。ブラウザーがメディアフラグメントの表記を理解していない場合、フラグメントを無視して画像全体を表示します。

image() を理解できるブラウザーはフラグメント表記も理解できます。したがって、フラグメントが image() の中で理解できない場合は、その画像は無効とみなされます。

image() で画像ソースと一緒に色が指定されていると、画像が無効で表示されない場合の代替として機能します。このような場合、image() 関数は、画像が含まれていないかのように描画を行い、単一色の画像を生成します。例として、白いテキストの背景に暗い色の画像を使用する場合を考えてみましょう。画像が描画されない場合、前景のテキストを読みやすくするために暗い背景色が必要になることがあります。

画像ソースを省略して色を含めることは有効で、色見本を作成します。背景色を宣言すると、すべての背景画像の下や後ろに配置されるのとは異なり、これは他の画像の上に (通常は半透明の) 色を配置するために使用できます。

色見本の寸法は、 background-size プロパティで設定できます。これは、要素全体を覆うように色を設定する background-color とは異なります。 image(color) と background-color の両方を配置すると、 background-clip と background-origin プロパティの影響を受けます。

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

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

この機能は、画像の読み込みに失敗したときに予備の色を提供することで、アクセシビリティの向上に役立ちます。この機能は、すべての背景画像に背景色を含めることで実現できますが、 CSS の image() 関数では、画像の読み込みに失敗したときに背景色のみを含めることができます。つまり、透過 PNG/GIF/WebP の読み込みに失敗したときに、予備の色を追加することができます。

<ul>
  <li dir="ltr">行頭記号が左側で右向きの矢印になります。</li>
  <li dir="rtl">行頭記号は同じ矢印で、左を指します。</li>
</ul>

ul {
  list-style-image: image(ltr "rightarrow.png");
}

左書きのリスト項目 (要素自体に dir="ltr" が設定されているもの、祖先から書字方向を継承しているもの、ページの既定値) では、画像がそのまま使用されます。 <li> に dir="rtl" が設定されているリスト項目や、祖先から右から左への指向性を受け継いでいるリスト項目 (アラビア語やヘブライ語に設定されている文書など) では、 transform: scaleX(-1) が設定されているかのように、箇条書きのテキストが水平方向に反転して右に表示されます。テキストも左書きで表示されます。

<div class="box">この上にカーソルを移動してください。どのように見えますか？</div>

.box:hover {
  cursor: image("sprite.png#xywh=32,64,16,16");
}

ユーザーがボックスの上にカーソルを移動させると、カーソルは x=32 と y=64 の位置から始まる 16x16 ピクセルの範囲のスプライト画像に変わります。

.quarter-logo {
  height: 200px;
  width: 200px;
  border: 1px solid;
}

.quarter-logo {
  background-image: image(rgb(0 0 0 / 25%)), url("firefox.png");
  background-size: 25%;
  background-repeat: no-repeat;
}

<div class="quarter-logo">
  対応している場合、この div の 4 分の 1 は、ロゴが暗くなります
</div>

上記の例は、 Firefox のロゴの背景画像に半透明の黒いマスクをかぶせています。 background-color プロパティを使用していた場合は、色はロゴ画像の上ではなく背後に表示されていたでしょう。また、コンテナー全体の背景色も同じになっていたでしょう。 image() と background-size プロパティを使用し、 background-repeat プロパティで画像が繰り返されないようにしたため、色見本はコンテナーの 4 分の 1 しか覆っていません。

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