image-set()

構文

/* 解像度に基づいて画像を選択 */ image-set( "image1.jpg" 1x, "image2.jpg" 2x ); image-set( url("image1.jpg") 1x, url("image2.jpg") 2x ); /* 解像度に基づいてグラデーションを選択 */ image-set( linear-gradient(blue, white) 1x, linear-gradient(blue, green) 2x ); /* 対応しているファイル形式に基づいて画像を選択 */ image-set( url("image1.avif") type("image/avif"), url("image2.jpg") type("image/jpeg") ); 

値

<image>

<image> は画像セット以外のあらゆる画像を指定できます。 image-set() 関数は他の image-set() 関数の中に入れ子にすることはできません。

<string>

画像への URL です。

<resolution> 省略可

<resolution> の単位には、x や dppx (dots per pixel 単位)、dpi (dots per inch)、dpcm (dots per centimeter) があります。 image-set() 内の画像はすべて、解像度が固有でなければなりません。

type(<string>) 省略可

有効な MIME タイプの文字列、例えば "image/jpeg" です。

形式文法

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

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

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

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

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

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

<image-tags> = 
 ltr |
 rtl 

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

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

<id-selector> = 
 <hash-token> 

アクセシビリティ

ブラウザーは支援技術に対して、背景画像についての特別な情報を何も提供しません。これは主に読み上げソフトにとって重要であり、読み上げソフトは背景画像が存在することをアナウンスせず、したがってユーザーには何も伝えられません。もし画像がページ全体の目的を理解するのに重要な情報を含んでいる場合は、文書中に意味的に記述するようにしてください。

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

例

image-set() を使用して代替の background-image オプションの提供

この例は image-set() を使用して 2 つの代替 background-image オプションを提供する方法を示しています。解像度の必要性に応じて、通常版と高解像度版から選択します。

<div class="box"></div> 

.box { width: 400px; height: 200px; background-repeat: no-repeat; background-size: cover; background-image: image-set( url("https://mdn.github.io/shared-assets/images/examples/balloons-small.jpg") 1x, url("https://mdn.github.io/shared-assets/images/examples/balloons-landscape.jpg") 2x ); } 

image-set() を使用して別な画像形式を提供

次の例では type() 関数を使用して画像を AVIF および JPEG 形式で提供しています。ブラウザーが avif に対応している場合は、このバージョンが選択されます。それ以外の場合は jpeg バージョンを使用します。

<div class="box"></div> 

.box { width: 400px; height: 200px; background-repeat: no-repeat; background-size: cover; background-image: image-set( "https://mdn.github.io/shared-assets/images/examples/balloons-landscape.avif" type("image/avif"), "https://mdn.github.io/shared-assets/images/examples/balloons-landscape.jpg" type("image/jpeg") ); } 

仕様書

ブラウザーの互換性

関連情報

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