[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

About FREMYCOMPANY

François REMY est un jeune développeur belge plein d'entrain qui traite surtout des technologies du web et de DotNet dans ses articles.

Les 10 derniers blogs postés

- [Perso] Découvertes estivales : Linux (Part I) par Le blog de FremyCompany le il y a 2 heures et 23 minutes

- [Refactoring] ReSharper pour Visual Studio 2010 (Preview) par Thomas Jaskula le il y a 16 heures et 59 minutes

- [Refactoring] Analyser vos exceptions avec ReSharper Exceptional par Thomas Jaskula le il y a 18 heures et 13 minutes

- SharePoint 2007 : patterns & practices SharePoint Guidance par Philippe Sentenac [MVP SharePoint] le 07-03-2009, 09:56

- [Visual Studio 2010] Les tests cases c’est bien, mais je vais devoir tout réécrire ? par Etienne Margraff le 07-03-2009, 09:00

- MVP[Gribouillon].AddYear par The Grib's Lair [Sébastien PICAMELOT - MVP SharePoint] le 07-03-2009, 08:45

- Clinique INSIA - Projet de fin d’Etudes (Silverlight 3 MVVM et OutOfBrowser, WCF, TFS) - Part 1 par David REI le 07-02-2009, 23:38

- C’est la crise ? Bah pourquoi cramer du budget pub alors ? par Nix's Blog le 07-02-2009, 15:31

- Soyons MVP ! par TheSaib .NET blog le 07-02-2009, 12:15

- SharePoint : Gestion des Erreurs 6398, 7076 et 6482 par Blog Technique de Romelard Fabrice le 07-02-2009, 11:53