opacityプロパティで背景色を透過させ、デザインの幅を広げる
2024-04-11
CSSの opacity プロパティを使って背景色のみを透過させる方法
このプロパティを使って、背景色のみを透過させ、テキストは不透明のままにすることができます。
方法
- 透過させたい要素のスタイルシートに
opacityプロパティを設定します。 - 透過させたい要素の背景色を
background-colorプロパティで設定します。 - テキストの色は
colorプロパティで設定します。
例
<div class="box">
<h1>タイトル</h1>
<p>テキスト</p>
</div>
.box {
background-color: rgba(255, 0, 0, 0.5); /* 半透明の赤 */
opacity: 1; /* 要素全体を不透明にする */
color: black; /* テキストの色を黒にする */
}
このコードでは、box 要素の背景色は半透明の赤に設定されますが、opacity プロパティによって要素全体が不透明になります。そのため、テキストは黒のまま表示されます。
opacityプロパティは、要素の子孫要素にも適用されます。opacityプロパティは、IE8 以前ではサポートされていません。
例1: 半透明の背景色
<div class="box">
<h1>タイトル</h1>
<p>テキスト</p>
</div>
.box {
background-color: rgba(255, 0, 0, 0.5); /* 半透明の赤 */
opacity: 1; /* 要素全体を不透明にする */
color: black; /* テキストの色を黒にする */
}
例2: 画像の背景を透過させる
<div class="box">
<img src="image.jpg" alt="画像">
</div>
.box {
background-image: url("image.jpg");
opacity: 0.5; /* 画像を半透明にする */
}
例3: 擬似要素を使って背景を透過させる
<div class="box">
<h1>タイトル</h1>
<p>テキスト</p>
</div>
.box {
position: relative;
}
.box::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒 */
opacity: 1; /* 要素全体を不透明にする */
z-index: -1; /* 背景を要素の下に配置する */
}
これらのコードを参考に、さまざまな方法で背景色のみを透過させてみてください。
CSSで背景色のみを透過させるその他の方法
background-color プロパティの値に rgba() を使用すると、背景色の透明度を指定できます。
<div class="box">
<h1>タイトル</h1>
<p>テキスト</p>
</div>
.box {
background-color: rgba(255, 0, 0, 0.5); /* 半透明の赤 */
color: black; /* テキストの色を黒にする */
}
解説
rgba()の最初の 3 つの値は、赤、緑、青の各色の値を表します。値は 0 から 255 の範囲で、0 は色がなく、255 は色が最も濃くなります。- 4 番目の値は、透明度を表します。値は 0 から 1 の範囲で、0 は完全に透明、1 は完全に不透明を表します。
linear-gradient() を使用して、グラデーションの背景を作成できます。透明な色をグラデーションの一部に使用することで、背景色を透過させることができます。
<div class="box">
<h1>タイトル</h1>
<p>テキスト</p>
</div>
.box {
background-image: linear-gradient(to right, rgba(255, 0, 0, 0.5), transparent);
color: black; /* テキストの色を黒にする */
}
linear-gradient()の最初の引数は、グラデーションの方向を表します。- 2 番目の引数は、グラデーションの色を表す色のリストです。
transparentは、透明な色を表します。
filter: blur() を使用して、要素をぼかすことができます。ぼかし効果を背景色にのみ適用することで、背景色を透過させることができます。
<div class="box">
<h1>タイトル</h1>
<p>テキスト</p>
</div>
.box {
background-color: red;
color: black; /* テキストの色を黒にする */
filter: blur(5px); /* 背景色をぼかす */
}
blur()の引数は、ぼかしの量を表します。値が大きくなるほど、ぼかし効果が強くなります。
mask-image を使用して、要素にマスク画像を適用できます。マスク画像には透明な部分を含めることができ、その部分を通して背景色が透けて見えます。
<div class="box">
<h1>タイトル</h1>
<p>テキスト</p>
</div>
.box {
background-color: red;
color: black; /* テキストの色を黒にする */
mask-image: url("mask.png");
}
mask-imageの引数は、マスク画像の URL を表します。- マスク画像には、透明な部分を含めることができます。
<div class="box">
<h1>タイトル</h1>
<p>テキスト</p>
</div>
.box {
background-color: red;
color: black; /* テキストの色を黒にする */
clip-path: circle(50%);
}
clip-pathの引数は、クリップ形状を表します。- 円形のクリップ形状を作成するには、
circle()関数を使用します。
これらの方法のどれを使用するかは、デザインや目的に応じて決定します。
- CSS linear-gradient() - MDN Web Docs:
css opacity
