CSS note

Object要素を使う例

正常な場合

data属性のURLが404

HTML

<object class="object-image" data="https://tenman.info/labo/css/files/raspberries.jpg" type="image/png">
 <img src="https://tenman.info/labo/css/files/tanpopo.jpg" />
</object>

CSS

.object-image img, .object-image{
 width:290px;
 height:auto;
}

マルチプルバックグラウンド画像を使う例

backgroundの最初のURLが404

HTML

<div class="bg-image"></div> 

CSS

.bg-image{
 width:290px;
 height:290px;
 background-image: url(https://tenman.info/labo/css/files/raspberries.jpg), url(https://tenman.info/labo/css/files/tanpopo.jpg);
 background-size:contain;
}

Inputting a default image in case the src arribute of an html is not valid?

新着記事