CSS3

CSS関数

image()

  編集:2022.07.13 by T.A.

[Edge]⛌。→mdn

image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-tags>
ltr
| rtl
<image-src>
<url>
| <string>
<color>
<absolute-color-base>
| currentcolor
| <system-color>

フォールバック色を利用すれば、画像の読み込みに失敗したときでも、少なくともテキストは読めるようになる。

例えば次の旧来コードは、画像が透明度を持たない矩形であれば、問題なく働く。

body      { color: black; background: white; }
p.special { color: white; background: url("dark.png") black; }

画像が読み込めなくても、背景色により、依然として白いテキストは読める。しかしながら、画像に透明度がある場合、背後の黒が可視になり、おそらく欲されない結果になる。image() 関数は、これに取り組む:

body      { color: black; background: white; }
p.special { color: white; background: image("dark.png", black); }

今度は、画像を読み込めたときには黒はまったく現れなくなる一方、何らかの理由で画像の読み込みに失敗した場合には黒がそれに代わり、白い背景に白いテキストが設定されるのを防げる。

<DIV style="border:1px solid black; width:200px; height:100px;
 color:black;
 background:white;
">
 <DIV style="border:1px solid red;
  color:#ddd;
  background:image('../Sample/Picture.jpg');
 ">背景</DIV>
 <DIV style="border:1px solid red;
  color:#ddd;
  background:image('../Sample/Picture.jpg', black);
 ">背景</DIV>
 <IMG src="../Sample/Picture.jpg">
</DIV>


テスト
HTML:

ここに表示
HTML:

ここに表示
スクリプト:


スクリプト:



表示内容:
表示内容: