Transparante achtergrond en inhoud gewoon

Door 6 januari 2013Tips & Trucs

Iets transparant maken. Daar hebben we “opacity” voor en om Internet Explorer ook een plezier te doen de filters erbij:

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: 0.5;

Maar wanneer we bijvoorbeeld het volgende hebben:

<div>
	<h1>Titel</h1>
	<p>Tekst</p>
</div>

En we willen de achtergrond van de div transparant hebben is het meest logische:

div {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	opacity: 0.5;
	background: #000;
}
h1,p {
	color: #FFF;
}

Helaas, maar eigenlijk vanzelfsprekend, zal de titel en de tekst ook transparant worden! In deze situatie heeft de achtergrond een kleur. En kunnen we bijvoorbeeld rgba gebruiken welke de mogelijkheid bied om een kleur transparant te maken. Bijvoorbeeld:

div {
	background: rgba(0,0,0,0.5);
}
h1,p {
	color: #FFF;
}

Maar wat te doen als de achtergrond een afbeelding is?

div {
	background: url(afbeelding.jpg);
}
h1,p {
	color: #FFF;
}

Dan moeten we even gek doen, maar op de volgende manier is dit ook mogelijk:

div:before {
	background: url(afbeelding.jpg);
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	opacity: 0.5;
}
div {
	position: relative;
}
h1,p {
	color: #FFF;
}

Klik hier voor een online demo