opacityプロパティ

値

数値

0.0〜1.0の範囲で値を指定することができます。0.0は完全な透過、1.0は完全な不透過です。

CSSコード例

opacity: 0.5;

表示例：

親要素を透過すると、子要素も透過されてしまう問題

opacityプロパティは透過をする際に便利ですが、子孫要素も一緒に透過してしまう欠点があります。
もし背景のみを透過したい場合、その中にあるテキストまで透過されてしまうので意図しない表示結果となります。

子要素のテキストも透過されてしまう例

HTMLマークアップ例

<div class="sample_css2">
	<p>子要素も透過されてしまう</p>
</div>

CSSコード例

opacity: 0.3;

表示例：

背景が画像ではない場合の解決法

もし親要素の背景に画像を使っておらず、ベタで色を敷いているだけの場合は簡単に解決できます。CSSでopacityプロパティを使用せず、backgroud-colorプロパティのrgba形式で指定を行います。HTMLは変更ありません。

rgba形式は「,（半角コンマ）」で区切り、red（赤）、green（緑）、blue（青）、alpha（透過度）の4つの値を順に指定していきます。red、green、blueは0〜255の範囲で指定し、alphaはopacityプロパティと同様に0.0〜1.0の範囲で指定します。

CSSコード例

background: rgba(145,197,255,0.3);

表示例：

背景画像のみを透過させたい場合の解決法

背景の画像のみを透過させたい場合、CSSのみでは解決できません。解決法として考えられるのは、背景画像をimg要素として分離し、その要素に対してopacityプロパティを適用するという方法になります。

修正したHTMLとCSSは次のようになります。
ポイントはCSSのpositionプロパティを使って要素を配置することと、子孫要素よりも重ね順が下になるようにz-indexプロパティを指定しているところです。

HTMLマークアップ例

<div class="sample_css3">
	<p>子要素も透過されてしまう</p>
	<img alt="背景画像" src="https://gray-code.com/wp-content/uploads/2016/06/bg_sample.jpg">
</div>

CSSコード例

.sample_css3 {
	overflow: hidden;
	position: relative;
}
.sample_css3 .bg_img {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 50%;
	height: auto;
	opacity: 0.5;
}

表示例：

背景画像のみ透過されます

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。