[CSS]Avoir un background semi-transparent, mais un contenu opaque ?

Est-ce possible ? En CSS uniquement ?

Comme d'habitude : oui et non....

Sous IE, vous avez (css) :

filter: progid:DXImageTransform.Microsoft.Gradient(
   startcolorstr="#55ffffff",endcolorstr="#55ffffff"
);

Sous les autres navigateurs, ben il n'y a pas de solution aussi simple Smile

Votre première arme sera d'utiliser le positionning :

<div>
    <div style="background: white; opacity: 0.75; width: 100%; height: 400px;"></div>
    <div style="margin-top: -400px">
         Contenu de la page
    </div>
</div>

Mais cela implique de connaitre la taille de la zone.

Si vous ne la connaissez pas, à moins que qqun aie une autre idée, vous devrez passer par l'utilisation d'une deuxième arme :

- RGBA(255,225,225,0.666); (Compatible avec les dernières versions de FireFox et Safari seulement)

- Du JavaScript (Mais cela ne marchera pas sur les 5% de nav's avec JS désactivés)

- Ou, mieux, une image PNG (mais alors vous aurez des problèmes sous IE 6-, sur Beaucoup% de surfeurs donc, à moins d'utiliser du JavaScript pour corriger le problème)...

Fremy

Publié vendredi 7 mars 2008 21:51 par FREMYCOMPANY
Classé sous ,
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :

Commentaires

# re: [CSS]Avoir un background semi-transparent, mais un contenu opaque ? jeudi 17 avril 2008 21:21

Pour ceux qui au sortir de ce document se demandent comment faire, voici ma solution préférée:

background: url('aaFFFFFF.png');

_background: none transparent;

_filter: progid:DXImageTransform.Microsoft.Gradient(startcolorstr="#aaFFFFFF",endcolorstr="#aaFFFFFF");

FREMYCOMPANY


Les 10 derniers blogs postés

- WSC08 : Le bilan, Les Photos, Les Webcasts à voir ou à revoir par Blog de Daniel TIZON [daniel] le il y a 6 heures et 31 minutes

- SharePoint et ses DB : Avez vous pensé à les "Tweaker" ? par The Mit's Blog le il y a 7 heures et 0 minutes

- NTttcp : Mesurer la vitesse d'un réseau par Blog d'Olivier Huet le il y a 7 heures et 25 minutes

- Un nouveau quizz par Matthieu MEZIL le il y a 10 heures et 9 minutes

- Webcast ADO.NET Data Services par Matthieu MEZIL le il y a 10 heures et 12 minutes

- edmx : mise à jour du modèle depuis la base par Matthieu MEZIL le il y a 13 heures et 59 minutes

- Alternatif - Mono 2.0 est arrivé! par #Rui le il y a 15 heures et 13 minutes

- Nouveaux avatars pour vos comptes CodeS-SourceS (suite) par Nix's Blog le il y a 17 heures et 17 minutes

- WSC 2008 : les Videos disponibles ! par Philippe Sentenac [MVP SharePoint] le il y a 19 heures et 26 minutes

- Visual Studio Talk Show: Visual Studio Team System par Azra [Florent Santin] le il y a 21 heures et 11 minutes