CSS3

CSS関数

image-set()、-webkit-image-set()

[Edge]⛌？。→●、mdn

主に高解像度の画面において、指定されたセットから最も適切な CSS 画像をブラウザーに選択させる。

<image-set-option> ⤴

＝[<image> | <string>] [<resolution> || type(<string>)]

<image> ⤴

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

<string> ○ ⤴

<url> を表現する

<resolution> ○ ⤴

これは、［ユーザーエージェントが、どの <image-set-option> を選ぶか裁定する］ことを助けるために利用される。

当の画像参照がラスター画像用ならば、画像の生来な解像度も指定する ― それは、生来な解像度を給する他のデータ源があっても、それを上書きする。

指定されなかった場合、［どの <image-set-option> を利用するか選定する目的］においては、1x としてふるまう。それはまた，画像の生来な解像度も既定の 1x にするが、他の何らかのデータ源が生来な解像度を給する場合、その解像度を尊守するものとする。

type(<string>) ⤴

<string> 内に画像の MIME 型を指定する。

<string> を妥当な MIME 型として構文解析した結果が［妥当でない／サポートされる画像形式を指定しない］場合、<image-set-option> は妥当なオプションを定義しない。（これは、image-set() 関数の妥当性には影響しない。）

これには、画像自体に対する効果は無い。url("picture.png") 1x format("image/jpeg") の様な <image-set-option> は妥当であり、選ばれた場合 ― JPEG 形式として宣言されていようが ― リンク先の PNG 画像を表示することになる。

指定されなかった場合、<image-set-option> に対する効果は無い。

<gradient> ⤴

＝<linear-gradient()>
| <repeating-linear-gradient()>
| <radial-gradient()>
| <repeating-radial-gradient()>
| <conic-gradient()>
| <repeating-conic-gradient()>

image-set() 関数は、直接的にも（他の <image> 型の引数として）間接的にも、入れ子にできない。

background-image: image-set(
    "foo.png" 1x,
    "foo-2x.png" 2x,
    "foo-print.png" 600dpi
);

<DIV style="border:1px solid red; width:200px; height:100px;
 background-image:image-set('../Sample/Picture.jpg' 1x);
 background-image:-webkit-image-set('../Sample/Picture.jpg' 1x);
">テスト
</DIV>
<IMG src="../Sample/Picture.jpg">

テスト

テスト