CSSで背景のみ透過させる方法

moon

CSSで背景のみ透過させようとしたときに、文字も透過してしまったことはありませんか?

そんなときはopacityではなくrgbaを使うと解決できますよ!

今回はその方法について詳しくご紹介します。

スポンサーリンク

CSSで背景のみ透過させる方法

opacityを使った場合

まずはopacityを使った時の動作確認から。背景を透過させたい要素にopacityをあてると透過します。

数値は小さいほど透過具合が薄くなるので、少しずつ調整しましょう。

opacity05

ただ、これだと文字まで透過していることがわかります。opacityを0.1にするともっとわかりやすいかも。

opacity01

これを解決するためにrgbaを使います。

rgbaを使った場合

rgbaはCSS3で新しく追加された色の指定方法で、RGBにalphaが加わったものです。

この部分をopacityのように指定して透過してあげると、文字が透過せずにすみます。実際に見てみましょう。

rgba05

これも透過度を0.1にするともっとわかりやすいですね。

rgba01

これで文字を透過させず、背景のみ透過させることに成功しました!やったね

さいごに

これって本当に知ってるか知らないかの世界で、もしopacityとrgbaのどちらかしか知らないと、もう一方で出来ることができなくなるので大変ですよね・・・。

自分も最初はopacityしか知りませんでしたし・・・。

スポンサーリンク

フォローする

コメントをどうぞ

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


*