作成日:2018-01-17, 更新日:2018-03-15
要素全体の半透明
「opacity」で指定。
丸ごとシマウマ opacity:0.3
丸ごとシマウマ opacity:0.5
丸ごとシマウマ opacity:0.8
<div style="background-color:#000000;opacity:0.3;">丸ごとシマウマ opacity:0.3</div>
<div style="background-color:#000000;opacity:0.5;">丸ごとシマウマ opacity:0.5</div>
<div style="background-color:#000000;opacity:0.8;">丸ごとシマウマ opacity:0.8</div>
背景色のみ半透明
半透明にしたい対象の色指定を「rgba()」で指定。
丸ごとシマウマ 0.3
丸ごとシマウマ 0.5
丸ごとシマウマ 0.8
<div style="background-color:rgba(0, 0, 0, 0.3);">丸ごとシマウマ 0.3</div>
<div style="background-color:rgba(0, 0, 0, 0.5);">丸ごとシマウマ 0.5</div>
<div style="background-color:rgba(0, 0, 0, 0.8);">丸ごとシマウマ 0.8</div>
メモ
同じ色に見えないので並べてみた。
「background-color:#000000;opacity:0.5;」は、文字も半透明
「background-color:rgba(0, 0, 0, 0.5);」は、背景色のみ半透明
<div style="background-color:#000000;opacity:0.5;">「background-color:#000000;opacity:0.5;」は、文字も半透明</div>
<div style="background-color:rgba(0, 0, 0, 0.5);">「background-color:rgba(0, 0, 0, 0.5);」は、背景色のみ半透明</div>