【CSS】img要素のalt属性（代替テキスト）の文字色を変更する方法

2021年8月12日2023年1月22日

img要素のalt属性（代替テキスト）の文字色を変更する方法

目次へ

img要素のalt属性（代替テキスト）の文字色を変更する方法

img要素のalt属性（代替テキスト）の文字色を変更する方法に関するメモ。
alt属性（代替テキスト）の文字色を変更するにはCSSのcolorで指定します。

img要素の画像が表示されている場合は、この指定は特に意味がありませんが、
img要素の画像が見えずに代替テキストが表示されている場合はここで指定した色で表示されます。

背景色が黒の場合は代替テキストを白字にするなどの使い方が出来ます。

See the Pen
img-color by shiakisudev (@shiakisu)
on CodePen.

HTML

<img class="pattern1" src="abcde.jpg" alt="あいうえお" height="100" width="100">
<img class="pattern2" src="abcde.jpg" alt="あいうえお" height="100" width="100">

CSS

.pattern1{
  display:block;
  border : 1px solid black;
  background-color:black;
  color:white;
}
.pattern2{
  display:block;
  border : 1px solid black;
  background-color:white;
  color:red;
}