Result
1番上が画像のURLが存在しない時で、特に何もしない場合に表示されるやつ。
2番目が対策した場合+画像が無い時。
3番目が対策した場合+画像がある時。
何もしなければ1番目の表示になります。
対策すると2番目のように任意のスタイルで表示されます。
対策した場合でも3番目のように画像があれば影響を受けません。
css
ご存知のように基本的にはimgに疑似要素は使う事が出来ません。
が、デモのように画像が存在しない時は使う事が出来るようなのでそれを利用してスタイリングする、みたいな話です。
img {
display: inline-block;
font-family: Arial, sans-serif;
font-weight: 300;
line-height: 2;
text-align: center;
min-width: 300px;
min-height: 50px;
position: relative;
}
img::before {
content: "";
width: 100%;
height: calc(100% + 10px);
background-color: #ccc;
border-radius: 10px;
position: absolute;
top: 50%;
left: -2px;
transform: translateY(-50%);
}
img::after {
content: "画像がありません";
font-size: 18px;
color: rgb(100, 100, 100);
display: block;
position: absolute;
z-index: 2;
top: 5px;
left: 0;
width: 100%;
height: 100%;
}
画像が無い時は疑似要素を使える事を今まで知りませんでしたけど常識なんでしょうか。恥ずかしながら昨夜、初めて知りました。
仕様かどうかは分かりませんし今は時間取れないので調べてもいないですがひとまず覚えておこうかなと思います。
Firefoxはaltがあると中身が表示されるっぽいので何かしら対策必要かもですね。
以下で知りました。有難うございます。
