CSSで透明度の指定をする

CSSで透明度を指定する方法をまとめました。
要素に透明度を指定するには、CSS3の「opacityプロパティ」や「RGBaプロパティバリュー」を使用します。
opacityプロパティ
透明度を表します。
指定した要素の全体に対して有効で、子要素にも引き継がれます。
opacityプロパティを指定していないときのデフォルト値は「1」です。
以下のサンプルにcssを適用しています。
sample
<!-- html --> <div class="sample"> sample </div>
/* css */ .sample { width:300px; padding:20px; border: 10px solid #000; color: #000; }
opacity: 1;
sample
.sample { opacity: 1; -moz-opacity: 1; filter: alpha(opacity=100); }
opacity: 0.75;
sample
.sample { opacity: 0.75; -moz-opacity: 0.75; filter: alpha(opacity=75); }
opacity: 0.5;
sample
.sample { opacity: 0.5; -moz-opacity: 0.5; filter: alpha(opacity=50); }
opacity: 0.25;
sample
.sample { opacity: 0.25; -moz-opacity: 0.25; filter: alpha(opacity=25); }
opacity: 0;
sample
.sample { opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); }
RGBaプロパティバリュー
「RGB」はRed/Green/Blueを、「a」はalpha(透明度)を表します。
指定したプロパティ以外には影響しないので、子要素に引き継がれることもありません。
以下のサンプルにcssを適用しています。
sample
<!-- html --> <div class="sample"> sample </div>
/* css */ .sample { width:300px; padding:20px; border: 1px solid #000; color: #000; }
RGBa(0,0,0,1)
sample
.sample { background-color: #000; background: rgba(0,0,0,1); }
RGBa(0,0,0,0.75)
sample
.sample { background-color: #000; background: rgba(0,0,0,0.75); }
RGBa(0,0,0,0.5)
sample
.sample { background-color: #000; background: rgba(0,0,0,0.5); }
RGBa(0,0,0,0.25)
sample
.sample { background-color: #000; background: rgba(0,0,0,0.25); }
RGBa(0,0,0,0)
sample
.sample { background-color: #000; background: rgba(0,0,0,0); }
おまけ
マウスオーバー時にcssを適用してロールオーバーを表現することもできます。
opacityプロパティ
sample
.sample:hover { opacity: 0.5; -moz-opacity: 0.5; filter: alpha(opacity=50); }
RGBaプロパティバリュー
sample
.sample:hover { background-color: #000; background: rgba(0,0,0,0.5); }
下のボタンを押すと拍手送信&メッセージフォームが開きます。→WEB拍手お返事
Comment