opacity vs. rgba() vs. transparentes Hintergrundbild

Beispiel 1 - opacity

Opacity wirkt sich auf den ganzen Container inklusive den Child-Elementen aus und alles wird transparent.

        			article.opacity {
				opacity: 0.5;
			}
			

Beispiel 2 - rgba()

Mit der CSS-Eigenschaft rgba() wird nur die Hintergrundfarbe transparent. Child-Elemente sind davon nicht betroffen.

        			article.rgba {
				background: rgba(255, 152, 0, 0.5);
			}
			

Beispiel 3 - CSS-Trick mit transparenten Hintergrundbild

Es gibt keine Standardeigenschaft um ein Hintergrundbild transparent zu machen ohne das dabei die Child-Elemente betroffen sind.
Hier muss man sich mit einem CSS-Trick und einem Pseudo-Element behelfen.

        			article.bgimage {
	position: relative;
	z-index: 1;
}

article.bgimage:after {
	content: "";
	background: url('../images/bg-image2.png');
	opacity: 0.5;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	position: absolute;
	z-index: -1;   
}