CSSで要素を半透明にする方法！様々な方法を解説
opacityプロパティは、要素の不透明度/透明度を指定します。
透過画像
opacityプロパティは0.0 ～ 1.0の値を取ることができます。値が低いほど透明になります。
不透明度 0.2
不透明度 0.5
不透明度 1 (デフォルト)
透明なホバー効果
opacityプロパティは、マウスオーバー時の不透明度を変更するために:hoverセレクターと一緒に使用されることがよくあります。
例の説明
最初のCSSブロックは、例1のコードに似ています。さらに、ユーザーが画像の1つにカーソルを合わせたときに何が起こるかを追加しました。この場合、ユーザーがホバーしたときに画像が透明にならないようにします。このためのCSSはopacity:1;です.
マウスポインタが画像から離れると、画像は再び透明になります。
逆ホバー効果の例
透明な箱
opacityプロパティを使用して要素の背景に透明度を追加する場合、その子要素はすべて同じ透明度を継承します。これにより、完全に透明な要素内のテキストが読みにくくなる可能性があります。
不透明度1
不透明度 0.6
不透明度 0.3
不透明度 0.1
RGBAを使用した透明度
上記の例のように、子要素に不透明度を適用したくない場合は、RGBAカラー値を使用します。次の例では、テキストではなく背景色の不透明度を設定します。
100% の不透明度
60% の不透明度
不透明度 30%
10% の不透明度
あなたは私たちから学びましたCSS 色の章で、RGBをカラー値として使用できることを学びました。RGBに加えて、アルファチャネル(RGBA)でRGBカラー値を使用できます。これは、色の不透明度を指定します。
RGBAカラー値は、rgba(red, green, blue, alpha)で指定します。の*アルファ*パラメータは、アルファパラメータは、0.0(完全に透明)から1.0(完全に不透明)までの数値です。
ヒント：RGBAカラーの詳細については、CSS色の章をご覧ください。
透明なボックス内のテキスト
これは、透明なボックスに配置されるテキストです。
例
<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>要素内にテキストを追加します。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。