HTMLで画像やテキストを半透明にする方法

sample

HTMLではCSSのopacity属性を使用することによって、divやimgなどの要素に透明度を設定することができます。

opacity: 0.5;

opacity属性は要素の透明度を0.0から1.0の範囲の数値で設定します。
0.0が完全な透明で、1.0に近づくごとに不透明になっていき、1.0で完全な不透明になります。

では、実際にopacity属性を設定して画像やテキストがどのように表示されるかを解説します。

画像を半透明にする

■ 表示される内容

img要素に透明度を設定して画像を半透明にした例です。
左が透明度1.0で完全な不透明。
中央が透明度0.5で、透明と不透明のちょうど中間の状態。
右が透明度0.1で、完全な透明の一歩手前の状態です。

文字を半透明にする

う
<span style="opacity: 0.9;">わ</span>
<span style="opacity: 0.8;">あ</span>
<span style="opacity: 0.7;">あ</span>
<span style="opacity: 0.6;">あ</span>
<span style="opacity: 0.5;">あ</span>
<span style="opacity: 0.4;">あ</span>
<span style="opacity: 0.3;">あ</span>
<span style="opacity: 0.2;">あ</span>

■ 表示される内容

うわあああああああ

span要素を使って1文字ごとに透明度を変化させた例。
テキストがフェードアウトするような感じになりました。

親要素に透明度を設定した場合

■ 表示される内容

透明度0.2

透明度0.5

透明度0.8

div要素に透明度を指定して、内包する画像とテキストの両方に透明度を適用させる例です。

要素に透明度を設定すると、その要素が内包している子要素にも透明度が適用されます。
同一の透明度を複数の要素にまとめて適用したい場合に活用しましょう。