Opacité

opacity

Opacité sur un élément héritée par son contenu.

CSS

	
	#boite {
		height: 100px;
		width: 200px;
		background-image: url(fond.png);
		padding: 10px;
		}

	#contenu {
		background: white;
		opacity: 0.5;
		}

HTML

	
	<div id="boite">
		<div id="contenu">
			<h1>Lorem ipsum</h1>
		</div>
	</div>

Compatibilité

Internet Explorer 8 ignore cette propriété

RGBa

Opacité sur un élément sans héritage.

CSS

	
	#boite {
		height: 100px;
		width: 200px;
		background: white url(fond.png);
		padding: 10px;
		}

	#contenu {
		background-color: rgba(255,255,255,0.5);
		}

HTML

	
	<div id="boite">
		<div id="contenu">
			<h1>Lorem ipsum</h1>
		</div>
	</div>

Compatibilité

Internet Explorer 8 ignore cette propriété

RGB + RGBa

Opacité sur un élément sans héritage.

CSS

	
	#boite {
		height: 100px;
		width: 200px;
		background: white url(fond.png);
		padding: 10px;
		}

	#contenu {
		background-color: rgb(255,255,255);
		background-color: rgba(255,255,255,0.5);
		}

HTML

	
	<div id="boite">
		<div id="contenu">
			<h1>Lorem ipsum</h1>
		</div>
	</div>

Compatibilité

Internet Explorer 8 ignore cette propriété

Page de tests