「背景色」に「透明度」を加える方法は、
「背景色」「背景画像」によって
方法が異なる。

「opacity」プロパティを利用するか、
「背景色」を「rgba()」で色指定するかの方法がある。

簡単なのは、
「背景色」を「rgba()」で色指定する方法。

「opacity」プロパティで透明にすることができるが、
含まれる「子要素」にも、
同一の透明度が適用されてしまうので、
文字を読みやすくするために、
背景だけに透明度を与えたい時は、少々面倒。

だが、
「CSS」で、WEBを構築するなら、
「Position」「z-index」プロパティを利用して、透明度を追加する方法は、
覚えておいた方が良い。
中級レベルぐらいの知識。
他の方法にも応用が聞くので、
理解が出来て、使える用にはしておくと、
後々、便利だと思う。

ただ「背景色」だけを透明にしたい場合は、
「rgba()」が簡単で、便利な指定方法。

詳しくは、
下記をご参照ください。

INDEX

■ 「opacity」プロパティを使用して「透明」にする方法

■ 「背景色」を「rgba()」で指定して「透明度」を加える方法
■ 「透過色」を指定できる「rgba()」とは

■ Gallery

「opacity」プロパティを使用して「透明」にする方法

「CSS」では、
「opacity」プロパティを使って、
オブジェクトを透過させることもできる。

「opacity」プロパティは、
扱いが少し難しく、
「opacity」プロパティを使用して「透明」にすると、
指定した「要素」に含まれる「子要素」も含めて、
全て「透明」になってしまう。

なので、
「opacity」プロパティを使用して、
「背景画像」を透明にする場合は、
「position」「z-index」プロパティを使用し、
「要素」を重ねることで、
上に重ねた「要素」を「子要素」のように見せ、
背景だけに透明度を与えたようにすることができる。

サンプルコード

下記のサンプルコードは、
背景画像のオブジェクトに、
「白」の透明度のある背景色を被せて、
文字を際立たせるサンプルコード。

かなり面倒な方法だが、
以前は、
このようにして、
色々と「CSS」でデザイン性を構築していた。

現在でも、
他の「CSSデザイン」で役立つこともある。

背景に透明度を与える方法では、
「opacity」プロパティは、
あまり使われなくなると思われる。
「rgba()」での色指定が簡単で便利だから。

HTML

<div class="Object01">
<h2>Sample Text</h2>
</div>

CSS

.Object01{
position: relative;
z-index: 1;
width: 500px;
height: 300px;
background-image: url(画像ファイル名.jpg); background-position: center;
background-size: cover;
text-align: center;
}

.Object01::after{
content: "";
position: absolute;
z-index: 2;
width: 100%;
height:100%;
top: 0;
left: 0;
background-color: white;
opacity: 0.5;
}

.Object01>h2{
position: relative;
z-index: 3;
color: rgb(0, 0, 0, 1);
}

Back

「背景色」を「rgba()」で指定して「透明度」を加える方法

シンプルな
単一色の「背景色」に「透明度」を加えるには、
「background-color」プロパティに色指定する時に、
「rgba()」を使用して、「カラー（色）」を指定する。

「rgba()」は、
「カラー（色）」と「不透明度」を
指定できる「色指定方法」。

「rgba()」の指定方法

background-color:rgba(R,G,B,不透明度);
background-color:rgba(赤,緑,青,不透明度);
background-color:rgba(0〜255,0〜255,0〜255,0.00〜1.00)；

「不透明度50%」の「黒」指定

background-color:rgba(0,0,0,0.50)；

「不透明度30%」の「白」指定

background-color:rgba(255,255,255,0.30)；

Back

「透過色」を指定できる「rgba()」とは

「透過色」を指定できる「rgba()」は、
「RGBA」という指定方法で、
「色」を指定する「RGB（red・green・blue）」に加え、
「透明度」を示す「alpha」が加わった、
色の指定方法。

「rgba()」で指定することで、
簡単に「透明度」を加えた「色指定」ができるようになっている。

「rgba()」の指定方法

「rgba()」は、
「RGB」の色指定を「0～255」の整数の数値で行い、
「不透明度（alpha）」を
「0.00（透明）～1.00（不透明）」の「小数点第2位」までの数字で指定する。

「rgba()」の書式

rgba(R,G,B,Alpha)
rgba(「0～255」,「0～255」,「0～255」,「0.00～1.00」)

「rgba()」の値は、
「,」で区切って複数の値を指定する。

「不透明度０（透明）%（0.00）」を指定する場合	rgba( R, G, B, 0)
「不透明度25%（0.25）」を指定する場合	rgba( R, G, B, 0.25)
「不透明度50%（0.5）」を指定する場合	rgba( R, G, B, 0.50)
「不透明度75%（0.75）」を指定する場合	rgba( R, G, B, 0.75)
「不透明度100%（不透明）（1.00）」を指定する場合	rgba( R, G, B, 1)

0.00

0.10

0.20

0.30

0.40

0.50

0.60

0.80

1.00

「赤（Red）」の背景色を指定する書式

background-color:rgba(255,0,0,0);
background-color:rgba(255,0,0,0.50);
background-color:rgba(255,0,0,1);

「緑（Green」の背景色を指定する書式

background-color:rgba(0,255,0,0.50);

「青（Blue）」の背景色を指定する書式

background-color:rgba(0,0,255,0.50);

「白」の背景色を指定する書式

background-color:rgba(255,255,255,0.50);

「黒」の背景色を指定する書式

background-color:rgba(0,0,0,0.50);

「CSS」で「背景色」を「rgba()」で指定する方法

CSS
.Object01{
background-color:rgba(255,0,0,0.5);
margin: 5px 10px;
padding: 15px 0;
text-align:center;
}

.Object02{
background-color:rgba(250,0,200,0.5);
margin: 5px 10px;
padding: 15px 0;
text-align:center;
}

Back