[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

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 :
Publié 07 mars 08 09:51 par FREMYCOMPANY
Classé sous : ,

Commentaires

# FREMYCOMPANY said on avril 17, 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");

Les commentaires anonymes sont désactivés

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

- Merci par Blog de Jérémy Jeanson le 10-01-2019, 20:47

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01




Search

Go

Ce blog

Abonnements