CSSのopacityプロパティによる半透明度
要素の半透明度は、
プロパティopacityを使用しても設定できます。このプロパティも
0から1までの小数値を受け付けます。この場合、半透明度は
要素全体(そのテキスト、
背景、ボーダー)に対して同時に設定されます。
例を見てください:
<div id="parent">
<div id="elem">
Lorem ipsum dolor sit amet.
</div>
</div>
#parent {
background-image: url("bg.png");
background-repeat: no-repeat;
background-size: cover;
display: inline-block;
padding: 30px;
}
#elem {
width: 300px;
height: 200px;
padding: 10px;
font-size: 50px;
font-weight: bold;
border: 20px solid red;
background: black;
color: red;
opacity: 0.7;
}
:
何らかの背景画像があるとします。
その上に、テキスト、ボーダー、背景を持つ2つのブロックを配置してください。
これらのブロックで、
opacityによる半透明度と
rgbaによる半透明度の違いを実演してください。