CSSで図形や画像・文字を 透過させる方法使い分け３選を解説

背景画像の色合いが濃くて、デザインの中で浮いてしまうことがありませんか？

そんな時、背景画像を透過させることによって馴染ませることができます。

ここでは手間のかかる画像編集ではなく、
CSSの記述のみで、図形や画像・文字を透過させる3つの方法を紹介します！

CSSで透過させる方法は3つ

CSSを用いて背景を透過させる方法は、以下の3つがあります。

• CSSでopacityを使って透過させる
• CSSでbackground-color:rgba();を使って背景を透過させる
• CSSで擬似要素を使って背景を透過させる

それでは、3つの記述方法や注意点、目的に合った使い分けについて説明していきます！

opacityを使ってみよう！

CSSでopacityを用いて透明化する方法を使ってみましょう。opacityの値は0.0〜1.0の範囲で指定することができます。数値が0に近いほど透明に近づきます。

それでは、まずはじめに透過の指定のないコードを見てみましょう。

次に同じ画像に、CSSでopacity0.5を指定して透過させてみましょう。

透過させることができました。しかし、opacityでは子要素も透過させてしまうため、画像の上にあるテキストまで透過してしまいました。このように要素が重なった場合に、opacityは適しません。

opacityのおすすめの使い方

opacityは、画像にマウスをhovarさせた時に、画像を透過させる使い方がおすすめです。

下のCSSのコードは、ボタンにマウスをhover時に、ボタンを50％透過させたものです。ユーザーの動作に合わせて動きのあるサイトは、操作の意図がユーザーに伝わりやすくなります。

シンプルな動きですが、指定した要素を目立たせる事ができ、クリックをしてもらいやすくなります。

background-color:rgba();を使ってみよう！

次に、CSSでbackground-color:rgba();を使用して、背景画像だけを透過する方法を紹介します。

rgbaとは色の表現方法の一つです。r=red、g=geen、b=blue、a=alpha、の頭文字をとっています。最後の、alphaは透明度の設定で、0〜100まで指定することができ、数値が低くなるほど透明度は増します。

rgbaの4つの数値を用いて色と透明度を指定しますが、rgbaはopacityと異なり、子要素の透明度に影響を与えず、個別に透明度の指定が可能です。それではCSSのコードを書いてみましょう。

背景画像だけを透過させることができたので、テキストが読みやすくなりました。
またbackground-color:rgba();では、指定する色を変更することで、色を付けて透過させることも可能です。

rgbaで、yellowの設定をしてみましょう。

CSSでbackground-color:rgbaをyellowの指定をして透過させることができました。

CSSのbackgroundプロパティにはいろいろな種類があります。
「background:linear-gradient;」や「background:radial-gradient;」を指定することで、グラデーションをかけながら、背景画像を透過させることもできます。

擬似要素を使ってみよう！

次に、CSSで擬似要素を使用して、背景画像だけを透過させる方法を紹介します。

擬似要素は、HTMLの記述に影響を与えず、CSSで追加や装飾が行えるので、とても便利なものです。「::after」や「::before」はよく使われている擬似要素なので、使い方に慣れると表現の幅を広げることができます。

擬似要素では、「content:””;」というプロパティを必ず記述しなくてはなりません。beforeにて、中に何も含まれていないものを、要素として扱うために必要なものです。content:””;とdisplay:block;を組み合わせることで、疑似要素をブロック要素として配置しています。

それではCSSのコードを書いてみましょう。この記述によって背景画像に対して、透明度50％の白色を全面に被せています。

まず、CSSで親要素のcontentにposition:relativeとz-index:1を記述します。

続いて、擬似要素::afterにposition:absoluteとz-index:2を記述して親要素の表面に被せるように配置します。position: relative; は、position: absolute; とセットで使うことが多いです。

親要素に擬似要素を被せただけでは、子要素のh2まで透過してしまうので、h2に対してもposition:relativeとz-index:3を記述します。そうすることによって、h2が最前面に表示されるので、透過しない状態を表現することができます。

transparent

最後に、transparentを紹介します。

CSSのtransparentとは要素を透明にする方法です。transparentを指定すると要素の色が完全に透明になります。opacityやrgbaのように透明度を指定したり、変えることはできません。基本的にtransparentを指定して透明にする場合は、要素が重なっている時に、部分的に透明にして、その下にある要素を出したり、デザインの一環として使われる場合が多いです。

transparentは、テキストにも使えますが、意図的に透明にする場合は、明確な理由が必要です。意図が見えないまま乱用すると、「隠しテキスト」とみなされて、検索サイト側からペナルティを受ける可能性がありますので注意しましょう。

比較してみよう！

それぞれの特徴を知って、目的に合った使い分けをしましょう。

まとめ

CSSの記述で背景を透過させる方法を3つ（transparentを入れたら4つですね）紹介しました！

3つの中でも

いちばん簡単な方法は「opacity」
いちばん使い勝手が良い方法は「background-color:rgba();」

でしょうか？？

「疑似要素」も基本を理解するとデザインの幅を広げることができます。

それぞれ異なる性質がありますので、目的に合った使い分けが難しいこともあるかと思いますが、透過を加えることによって、ボタンやテキストを目立たせることができ、オシャレで、より華やかなWEBサイトを作成することができますので、ぜひ使ってみてください！