【CSSの基本】オブジェクトに不透明度を設定したい

オブジェクトに不透明度を設定したい

オブジェクトに不透明度を設定するには「opacity」プロパティを設定します。※不透明度・・・オブジェクトの裏側が見えなくなる割合です。

#sample { opacity: 0.5 }     /* オブジェクトの不透明度を0.5（50%）にする */

サンプルコード（CSS）

div.box {
     width: 100px;
     height: 30px;
     background-color: #FC0;
     margin-top: 5px;
     padding: 10px;
}

#futoumei00 {
     opacity: 0;     /* 裏側が完全に見える */
}
#futoumei03 {
     opacity: 0.3;     /* 裏側が30%見える */
}
#futoumei07 {
     opacity: 0.7;     /* 裏側が70%見える */
}
#futoumei10 {
     opacity: 1;     /* 裏側が完全に見えなくなる */
}

サンプルコード（HTML）

<div class="box" id="futoumei00">不透明度 0</div>
<div class="box" id="futoumei03">不透明度 0.3</div>
<div class="box" id="futoumei07">不透明度 0.7</div>
<div class="box" id="futoumei10">不透明度 1</div>

＜結果＞

それぞれのオブジェクトに不透明度が設定されました。

不透明度 0

不透明度 0.3

不透明度 0.7

不透明度 1

END