画像やテキストなどは通常表示で背景色だけを透過させる方法を紹介します。
原因
背景を透過させようとしたら画像やテキストなども全て透過されてしまいました。一体何が原因なのでしょうか。
結論から言うとopacityを使用していたのが原因でした。
背景だけを透過したい場合は背景色をrgbaで指定する
背景だけを透過したい場合は背景色自体をrgbaで指定して透過させます。
.background {
background-color: rgba(0, 0, 0, 0.9);
}
上記の例だと一番後ろの0.9となっている箇所が透明度の指定となります。ここの数値が小さいほど背景が透明に近くなります。
色をrgbaで指定する場合は変換ツールを使用すると便利です。
カラーコードからrgbaへ変換するツール【css】
バックグラウンドカラーの透過などに便利カラーコードをrgbaに変換するツールです。テキストボックにカラーコードを入力またはコピペすることでRGBaに変換されます。透明度は0.05刻みで設定できます。rgba(255,255,255,1)カラ