CSS 不透明度 / 透明度
opacity 属性は要素の不透明度/透明度を指定します。
透明な画像
opacity 属性の値の範囲は 0.0-1.0 です。値が低いほど、透明度が高くなります：
opacity 0.2
opacity 0.5
opacity 1
例
img {
opacity: 0.5;
}
透明なホバー効果
opacity 属性は通常、 :hover 選択子と一緒に使用することで、マウスオーバー時に不透明度を変更できます：
例
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
例の説明
最初の CSS ブロックは例 1 のコードに似ています。さらに、ユーザーが画像の上にマウスを合わせたときの効果も追加しました。この場合、ユーザーが画像の上にマウスを持っているときには、画像が不透明になるようにしたいです。この CSS は opacity:1;。
マウス指が画像から離れたときに、画像が再び透明になります。
逆スライド効果の例：
例
img:hover {
opacity: 0.5;
}
透明ボックス
を使用して opacity 属性を使用して要素の背景に透明度を追加すると、その全ての子要素が同じ透明度を継承します。これは、完全に透明な要素内のテキストを読みにくくすることがあります：
例
div {
opacity: 0.3;
}
RGBAの透明度を使用
子要素に不透明度を適用したい場合、上記の例のようにRGBA色値を使用してください。以下の例では、背景色を設定し、テキストの不透明度を設定しません：
あなたは私たちの CSS 颜色 この章では、RGBを使用して色値を指定する方法について学びました。RGB色値に加えて、RGB色値とアルファチャンネル（RGBA）を一緒に使用することもできます - このチャンネルは色の不透明度を定義します。
RGBA色値は以下のように指定されます：rgba(red, green, blue, alpha)。 alpha パラメータは0.0（完全に透明）から1.0（完全不透明）までの数値です。
ヒント：あなたは私たちの CSS 颜色 この章では、RGBA色についてのより多くの知識を学びました。
例
div {
background: rgba(76, 175, 80, 0.3) /* 不透明度 30% の緑色背景 */
}
透明ボックス内のテキスト
これは透明なボックス内に配置されたテキストです。
例
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>これは透明なボックス内に位置するテキストです。</p>
</div>
</div>
</body>
</html>
例の説明
まず、背景画像と枠線を持つ <div> 要素（class="background"）を作成します。
次に、最初の <div> 内に別の <div>（class="transbox"）を作成します。
<div class="transbox"> には背景色と枠線があります - この div は透明です。
透明白色の <div> 内に、<p> 要素内にテキストを追加しました。
