演習課題「ボックスの不透明度を指定しよう」
現在、ブラウザでは、ボックス1, 2, 3が重なって表示されています。
ここで、ボックス2の不透明度を0.7に指定してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃03:ボックスの不透明度を変える(opacity)
このチャプターでは、ボックスの不透明度を変える方法を学習します。
opacityプロパティを使うことで、ボックスの不透明度を指定できるようになります。
値は数字の「0」から「1」の数字で指定して、「1」なら完全に不透明、「0」なら完全に透明になります。
そして「0」と「1」の中間にある任意の数値を指定すると、その数値に合わせた透明度になります。「0」に近い値なら透明に近く、「1」に近い値なら不透明に近くなります。
@charset "UTF-8";
.contents {position: relative;}
.contents div {
width :100px;
height :100px;
}
.box_1 {
position: relative;
background-color: aqua;
}
.box_2 {
opacity: 0.5;
position: absolute;
left: 30px;
top: 30px;
background-color: yellow;
}
.box_3 {
position: absolute;
left: 60px;
top: 60px;
background-color: silver;
}