Opacité

Bonjour,

J'ai un léger problème. J'ai tenter quelques méthodes
sans succès et je me suis dit que la meilleur solution
était encore de faire appel à des avis extérieurs =)

Donc voici mon problème :

J'ai un background :

BODY {
	background-image : url('images/background.jpg');
	background-repeat : no-repeat;
	background-attachment : scroll;
	background-position : top left;
        background-color : #000;
        margin-top : 35px;
	margin-left : 100px;
        padding : 0px;
        border : 0px;
    }

Jusque là tout va bien

Après, j'ai un mon body découpé en deux tableaux qui ont une fond noir d'opacité 70%

http://pix.nofrag.com/7e/bc/7585d33368611f46c46b670865f8.jpg

Voilà le CSS qui s'y rapporte :

.content_rectangle {
	background-color : #000;
	filter : alpha('opacity = 80');
	-moz-opacity : 0.8;
	opacity : 0.8;
	-khtml-opacity : 0.8;
	padding : 0px;
	margin : 0px;
	border : 0px;
	}

Donc après dans ces deux rectangles je veut mettre du contenu
bien évidemment ^^

Et c'est la qu'arrive mon soucis :

Les écritures qui sont dans les cadres sont elles-aussi
en opacité 70% alors que je voudrais qu'elle soit à 100%
ainsi qu'un cadre noir. Donc je n'arrive pas à mes fins

http://pix.nofrag.com/bc/c4/5302698bc689805136ed02003540.jpg

Je précise que je travaille en locale et donc aucune URL n'est
disponible.

Merci d'avance pour l'aide que vous m'apporterez
Modifié par Hizo (26 Oct 2006 - 12:10)

Oui c'est un comportement normal en fait.
La solution est de ne pas utiliser ces propriétés d'opacité mais plutôt une image png (noire à 70% d'opacité) que tu place en backgroud dans tes tableaux (une image de 10x10 pixels suffit, tu la répète ensuite avec background-repeat:repeat)

Evidemment pour IE ça va poser un souci, il faut donc pour lui uniquement utiliser la propriété filter comme ceci :

.content_rectangle {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='monimage.png', sizingMethod='scale');
}

La valeur scale va étirer l'image en fond pour qu'elle occupe toute la surface du bloc .content_rectangle

Merci beaucoup pour ta rapidité.
Je vais tester cela tout de suite =)