Précédent   Forum des professionnels en informatique > Webmasters - Développement Web > CSS
CSS Forum d'entraide sur l'utilisation des feuilles de style CSS. Avant de poster : Cours CSS, FAQ CSS, Galerie CSS
Partagez cette discussion sur d'autres réseaux sociaux : Viadeo Twitter Google Facebook Digg Delicious MySpace Yahoo
Réponse Proposer ce sujet en actualité
 
Outils de la discussion
Publicité
'
Vieux 07/03/2011, 11h35   #1
Membre à l'essai
 
Inscription : décembre 2007
Messages : 105
Détails du profil
Informations forums :
Inscription : décembre 2007
Messages : 105
Points : 21
Points : 21
Par défaut transparant sur le font uniquement

Bonjour,
je voudrai faire un transparant sur ma page, le problème c'est qu'en mettant sa sur le background y a tout le contenue de la balise qui devient transparant!

avez vous une idée?

Code :
1
2
3
4
 
background-color:#333333;
opacity:0.6;filter:alpha(opacity=60);
background-repeat:repeat;
hichamdeb est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 07/03/2011, 13h57   #2
Rédacteur/Modérateur
 
Avatar de adiGuba
 
Homme
Développeur Java/Web
Inscription : avril 2002
Messages : 12 460
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : France, Corse (Corse)

Informations professionnelles :
Activité : Développeur Java/Web
Secteur : Transports

Informations forums :
Inscription : avril 2002
Messages : 12 460
Points : 19 447
Points : 19 447
Salut,


Ce comportement est tout à fait normal : opacity s'applique sur tout le bloc et sur tous ses composants...


La solution la plus propre pour cela existe en CSS3 via rgba() qui permet de définir une couleur avec une valeur alpha pour la transparence :
Code :
background-color: rgba(51,51,51,0.6);
Seulement ce n'est pas encore supporté par tous les navigateurs, donc il faut mettre en place une couleur par défaut sans transparence pour les vieux navigateurs :
Code :
1
2
background-color: rgb(51,51,51); /* pour les navigateurs incompatible */
background-color: rgba(51,51,51,0.6);
Attention toutefois : le support est assez récent (Firefox 3.0, Opera 10, Safari 3.1) et ne l'est pas encore pour IE (il faudra attendre la version 9).




Sinon une autre solution serait d'utiliser une image d'un pixel en background, en utilisant une image PNG avec une couche alpha.
Mais encore une fois, attention car les PNG pose des problèmes sur IE6 !


a++

PS : transparent
__________________
adiGuba [ tutoriels | blog | twitter ] Rédacteur/Modérateur Java Présentation de Java SE 7 (commentaires)
adiGuba est déconnecté   Envoyer un message privé Réponse avec citation 10
Vieux 07/03/2011, 16h17   #3
Membre à l'essai
 
Inscription : décembre 2007
Messages : 105
Détails du profil
Informations forums :
Inscription : décembre 2007
Messages : 105
Points : 21
Points : 21
Farfait ! sa marche au départ j ai opté pour l'image png, mais dans ce cas aussi, le contenue est transparant :/ tampis pour le IE =)
hichamdeb est déconnecté   Envoyer un message privé Réponse avec citation 00
Réponse Proposer ce sujet en actualité Cette discussion est résolue.
Outils de la discussion



Fuseau horaire GMT +2. Il est actuellement 17h46.


 
 
 
 
Partenaires

Hébergement Web