web-dev-qa-db-fra.com

Atteindre l'effet d'opacité du blanc en html / css

existe-t-il un moyen d'obtenir cet effet d'une manière compatible avec plusieurs navigateurs sans avoir à préparer des images séparées?

Fondamentalement, le cadre sur lequel le texte se trouve a une superposition blanche de 50% d'opacité .. Je voudrais une solution qui n'implique pas de créer une autre image en plus de l'arrière-plan mais je ne sais pas si c'est possible!

alt text

htmlcssopacity
32
Jack

Essayez RGBA, par exemple.

div { background-color: rgba(255, 255, 255, 0.5); }

Comme toujours, cela ne fonctionnera pas dans tous les navigateurs jamais écrits.

68
Bobby Jack

Si vous ne pouvez pas utiliser rgba en raison de la prise en charge du navigateur et que vous ne souhaitez pas inclure un PNG blanc semi-transparent, vous devrez créer deux éléments positionnés. Un pour la boîte blanche, avec opacité, et un pour le texte superposé, solide.

body { background: red; }

.box { position: relative; z-index: 1; }
.box .back {
    position: absolute; z-index: 1;
    top: 0; left: 0; width: 100%; height: 100%;
    background: white; opacity: 0.75;
}
.box .text { position: relative; z-index: 2; }

body.browser-ie8 .box .back { filter: alpha(opacity=75); }
<!--[if lt IE 9]><body class="browser-ie8"><![endif]-->
<!--[if gte IE 9]><!--><body><!--<![endif]-->
    <div class="box">
        <div class="back"></div>
        <div class="text">
            Lorem ipsum dolor sit amet blah blah boogley woogley oo.
        </div>
    </div>
</body>
3
bobince