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

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>

opacity:0.8を指定した場合

コードと表示例

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

opacity:0.5を指定した場合

コードと表示例

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

opacity:0.2を指定した場合

コード

<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の作業もする。 最近は生成AIの画像生成の沼に沈んでいる。