[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

- [WPF] Nouvel article sur c2i.fr par Richard Clark le il y a 1 heure et 39 minutes

- F# nouvelle CTP 1.9.6.2 (update) par Pierrick's Blog le il y a 5 heures et 45 minutes

- La suite ...Proposition de collaboration rédactionnelle entre les communautés de développeurs et Microsoft France par LucasR le 09-05-2008, 17:45

- [Fun] Votre simulateur de vol avec Microsoft ESP par Julien Chable le 09-05-2008, 12:02

- [Best Practices] Customisation du My Site : Comment le modifier en amont et en aval par The Mit's Blog le 09-05-2008, 10:47

- Patrick Tisseghem s'en est allé ... par The Mit's Blog le 09-05-2008, 10:04

- MS AutoCollage par alex# le 09-05-2008, 09:18

- Un grand SharePointeur nous a quitte : Patrick Tisseghem manquera à la communauté ! par RedoBlog - The .NET Gentleman !!! le 09-05-2008, 08:52

- [WPF] Comment charger dynamiquement un fichier XAML qui définit des eventhandler ? par Thomas Lebrun le 09-04-2008, 10:56

- Article sur le filtrage des modèles de site SharePoint par The Grib's Lair [Sébastien PICAMELOT - MVP SharePoint] le 09-04-2008, 00:11