網羅的に学ぶCSS3「opacity」
「opacity」は要素の透明度を指定します。
opacity は 0〜1 の間の値で設定し、0 で完全に透明、1 で不透明になります。
指定された要素に内包された要素も含めて同じ透明度が適用されますので、たとえば div に opacity:0.5; を指定すると、div に含まれた文字や画像も透明度 0.5 の半透明になります。
値
- 範囲:0(完全に透明) 〜 1(完全に不透明)
- 初期値:1
適用対象
- すべて
サンプルコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
#sampleBox { border: 1px solid #999; width: 300px; height: 300px; position: relative; } .box { position: absolute; width: 150px; height: 150px; color: #FFF; font-weight: bold; line-height: 150px; text-align: center; } .box1 { background-color: #F00; opacity: 0.5; top: 50px; left: 50px; } .box2 { background-color: #00F; opacity: 0.5; top: 100px; left: 100px; } |
1 2 3 4 |
<div id="sampleBox"> <div class="box1 box">BOX1</div> <div class="box2 box">BOX2</div> </div> |
BOX1
BOX2