【CSS】html要素を半透明にするopacityとbackground:rgbaの違い
2022.03.19
html要素を半透明にしたい場合、背景だけ透かしたいとか、テキストも含めて透かしたいとかいくつかパターンがあると思います。テキストを含めて半透明にしたい場合は、opacity、背景だけ半透明にしたい場合は、rgbaを使えばうまくいきます。
目次
1. はじめに
以下のサンプルを用意しました。
グレーのdivに赤のdivを重ねています。赤のdivにはhogeが記述されています。
このボックスの赤い部分をopacityとrgbaを使って半透明にしてみます。
hoge hoge hoge hoge hoge
html
<div class="box">
<div class="inner">
hoge hoge hoge hoge hoge
</div>
</div>css
.box {
width: 200px;
height: 200px;
background: gray;
}
.inner {
width: 100px;
height: 100px;
background: red;
}2. opacityの場合
opacityは指定した要素全体（内部のテキストも含めて）が透過します。
透過度は、0.1～1.0までの間で指定します。
hoge hoge hoge hoge hoge
html
<div class="box">
<div class="inner">
hoge hoge hoge hoge hoge
</div>
</div>css
.box {
width: 200px;
height: 200px;
background: gray;
}
.inner {
width: 100px;
height: 100px;
background: red;
opacity: 0.3;
}3. background:rgbaの場合
rgbaはbackgroundで指定するので、テキストは残し、背景だけ透過することができます。
透過度は、rgba(255,0,0,0.3)の4番目の引数で、opacityと同じく0.1～1.0までの間で指定します。（1～3番目の引数は、RGB値）
hoge hoge hoge hoge hoge
html
<div class="box">
<div class="inner">
hoge hoge hoge hoge hoge
</div>
</div>css
.box {
width: 200px;
height: 200px;
background: gray;
}
.inner {
width: 100px;
height: 100px;
background: rgba(255,0,0,0.3);
}4. まとめ
テキストを含めて要素全体を透過したい場合は、opacityを使用。
テキストは残して要素の背景だけを透過したい場合は、background:rgbaを使用。