文字や枠などのHTML要素の透明度を設定する - CSS

CSSのopacityプロパティーを設定すると文字や枠などのHTML要素の透明度を指定できます。

書式

opacity : (0から1.0までの値の透明度)

0で完全に透明となり画面から見えなくなります。1.0に設定すると完全に不透明になります。

p{
  opacity : 0.85;
}

.TransFrame{
  opacity : 0.25;
}

<div style="height:75px; padding-top:8px; border:solid 4px #808080;
  background-color:#0046f4;color:#FFFFFF;">枠つきです。</div>

枠つきです。枠です

<div style="height:75px; padding-top:8px; border:solid 4px #808080;
  background-color:#0046f4;color:#FFFFFF;opacity:0.8;">枠つきです。</div>

枠つきです。枠です

<div style="height:75px; padding-top:8px; border:solid 4px #808080;
  background-color:#0046f4;color:#FFFFFF;opacity:0.5;">枠つきです。</div>

枠つきです。枠です

<div style="height:75px; padding-top:8px; border:solid 4px #808080;
  background-color:#0046f4;color:#FFFFFF;opacity:0.2;">枠つきです。</div>

枠つきです。枠です

Opacityの値を小さくするほど透明度が高くなります。

著者

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。