[Résolu] Opacity et structure html

Salut

Je cherche à rendre les boites de mon site transparentes mais pas leur contenu.
J'ai don lu cet article.

https://developer.mozilla.org/fr/Astuces_CSS/Couleurs_et_fonds

Le seul moyen étant de faire sortir le contenu du flux m'oblige à rendre ma structure html pourrie.
exemple :

STRUCTURE DE BASE

	
<article>
	<section id="contenu">
	<header><h1>{$page['titre']}</h1><h2>{$page['intitule']}</h2></header>
	{$page['contenu']}
         </section>
</article>

STRUCTURE MODIFIEE

			
<section id="contenu">
<header><h1>{$page['titre']}</h1><h2>{$page['intitule']}</h2></header>
{$page['contenu']}
</section>

<article>
</article>

CSS MODIFIE

article{
	
	background:white;
	height:800px;
	width: 570px;
	position: relative;
	margin: 0 0 0 20px;
	padding:20px;
	opacity: 0.5;
	-moz-opacity: 0.5;
	filter:alpha(opacity=5);

	
}
section#contenu{
	height:800px;
	width: 570px;
	position: absolute;
	opacity: 1;
	-moz-opacity: 1;
	filter:alpha(opacity=1);
	z-index: 2;
	left:20px;
}
section#contenu > header h1{

	font-size:18px;
	padding: 10px 20px;
}
section#contenu > header h2{
	font-size:16px;
	padding: 10px 20px;
}

Comment faire pour avoir une structure potable,c-a-d d'éviter d'éjecter mes contenus de leurs containers ?
Modifié par phpCbien (02 Aug 2012 - 15:54)

Salut,

ça t'embête d'utiliser un PNG transparent ?

Oui

mon background est en position fixed

Voir ici :

http://www.xavierperrard.com/testv2/

Ça devra plus ou moins ressembler à ceci

http://www.xavierperrard.com/temp/screen.png

En désignant la couleur avec rgba, mais pas compatible partout, encore une fois...

oui

Mais IE more...

Non, ou bien une bande transparente en background-repeat ????

Ben oué un PNG transparent en repeat ça me parait bien

ouep

#container > article{
	
	background:url(../img/bgboite.png) repeat;
	height:800px;
	width: 570px;
	margin: 0 0 0 20px;
	padding:20px;
}

Bon ben merci d' votre aide