【CSS】背景や画像に透明感を加える方法

■ 透明度を調整できるプロパティ
■ カラー指定「rgba()」で透明度を指定する方法
■ 背景も内容も一緒に透過するCSSプロパティ「opacity」

「CSS」で透明度を調整できるのは、
・カラー指定「rgba()」
・CSSプロパティ「opacity」
などがある。

カラー指定「rgba()」

「背景色」だけ透明にしたい時は、 背景に対してカラー指定「rgba()」を指定すると、 「背景色」だけ透明にすることができる。
「テキスト」の色指定でも、
「rgba()」で、透明度を追加出来る。
カラー指定「rgba()」は、
指定方法によって、
個別に透明度を調整できるので、個別に指定すれば、
背景色・テキストを個別に透明度の調整ができる。

CSSプロパティ「opacity」

テキストや画像・背景画像を透明にしたい時は、
「opacity」プロパティが使える。
「opacity」は、「背景」「テキスト」「画像」をすべて含めて透明度を調整できる。
だが、
「opacity」プロパティは、
指定した要素に含まれる「子要素」もすべて透明にしてしまう特徴がある。
デメリットであり、
背景画像だけを透明にしたい場合は、
少し工夫が必要。


画像に関しては、
透明に出来るのは、
「opacity」プロパティのみで、


Back

カラー指定「rgba()」は、
「文字」の透明度はそのままに、
「背景画像」だけを「透明」にしたい時に使える方法。

「rgba()」で、
「透明」に出来るのは、
一緒に指定する「カラー（色）」のみ。

以前は、
CSSの「z-index」「Position」を利用して
「背景画像」要素と「文字」要素を
重ねる方法が使われましたが、
今では、
簡単な「rgba()」の色指定方法で、
背景色だけを透過させることが可能。


CSSでカラー指定をするときに使用できる「rgba()」は、
色だけでなく、透明度も指定できる。
CSSの「background」プロパティに、「rgba()」を使用して、「カラー」と「透明度」を指定する。


「rgba()」は、
「background」「background-color」だけでなく、
「border-color」「box-shadow」などにも使える。

「rgba()」の指定方法

Back

「opacity」とは

CSSプロパティ「opacity」は、
要素の透明度（不透明度）を設定できるプロパティ。


通常の要素は、「不透明度」が100%となっていて、完全に見える状態がデフォルトとなっている。
「opacity」の値を変更することで、「不透明度」の値を変更でき、
文字などが薄く表示され、背部の画像やカラーが透過して見えるようになる。

「opacity」の特徴は、背景も要素内のテキストも一緒に透過すること。
文字はそのままに、背景だけ透過させたい場合は、カラー指定「rgba()」を使用する。

「opacity」の書式

Back