背景だけ透過させて文字だけ透過させない方法

タイトルのまんまではですが、背景だけを透過させたくて、文字とかの要素はそのままにしたい場合の方法が意外にはまってしまったので記録します。背景だけを透過させたくて背景にopacityを指定すると、内包している全ての要素が透過されてしまいます。

背景にopacityを指定した場合

実際のボックス

BOXBOXBOXBOX

opacity:0.3を指定したボックス

BOXBOXBOXBOX

こんな感じで文字も一緒に透明になってしまいますね。これを解決するのが次の方法です。

カラーをRGBで指定する

カラーを指定する場合16進数(#000000)で指定されている方も多いと思いますが、この16進数で指定するのではなく、カラーをRGBで指定します。RGBで指定する場合はrgb(0,0,0,0)というふうに指定します。rgbは0〜255までの数字をRとGとBの3つ指定して色を作るので、カラーを入力し、カンマ(,)で区切ります。4つ目の値に透明度を指定する数字を入力すれば完成です。

BOXBOXBOXBOX

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Related Posts

簡単5分でパララックスサイトができる!jQuery fullpage.jsの使い方

CSS 縦横比を維持し、背景画像(background-image)を横幅いっぱいに可変表示する方法

line-heightプロパティでフォントサイズが変わっても行間の比率を同じにする方法