Remplacer opaque texte dans un transparent div en CSS

Je suis en train de faire du texte à l'intérieur d'un transparent div n'ont aucune opacité, aka être complètement noir:

<div style="opacity:0.6;background:#3cc;">
    <p style="background:#000;opacity:1">This text should be all black</p>
</div>

Est-ce possible de le faire uniquement avec du CSS?

Merci d'avance

+1 JabbR m'a amené ici.

OriginalL'auteur mager | 2010-03-03

  1. 13

    Le plus simple est de style de l'arrière-plan de la div parent avec l'opacité/alpha:

    div  {
    background: #fff; /* for browsers that don't understand the following rgba rule */
    background-color: rgba(255,255,255,0.5); /* rgb, white, with alpha at 0.5 */
}

    Ce n'est cependant pas compatible avec IE.

    Pour IE >= 7 compatibilité, vous pouvez utiliser:

    div  {
    background-image: url('path/to/partially_transparent.png');
    background-position: 0 0;
    background-repeat: repeat;
}

    Je rappelle que IE < 7 a une spécialité option de filtre, mais je crains que je ne peux pas me rappeler comment il fonctionne. Donc, j'ai omis de toute tentative de le décrire, de le montrer. Si je peux trouver une référence utile bien que je vais l'ajouter plus tard.

    Comme l'a noté easwee l'opacité est hérité par le contenu des éléments, c'est pourquoi vous ne pouvez pas le remplacer, et c'est pourquoi je préfère utiliser le background-color/background-image approche.

    Toujours déclarer un secours sans RGBa, comme décrit dans l'article j'ai fait un lien dans ma réponse.
    Korpel, oui, vous avez raison (et édité avec fallback).
    nope, ce qui déclenche un bug dans IE 6/7: css-tricks.com/ie-background-rgb-bug
    Korpel, après avoir lu la page que vous avez lié à je ne vois pas de bug dans IE6. La spécification d'une valeur qu'il comprenne avant de spécifier une valeur, il ne semble pas fonctionner pour moi (IE6 au travail, sur XP sp3)... =/
    Oh, ouais. J'ai utilisé background pas background-color dans le test. Mon mauvais.

    OriginalL'auteur David Thomas

  2. 3

    Les éléments enfants héritent de l'opacité. Ce que vous pourriez faire est de positionner la <p> à l'extérieur de l'opacité de la div et de définir une marge négative sur elle.

    Je suis tombé sur ce problème souvent et généralement résolu comme ça. Le problème est que lorsque vous avez du contenu dynamique et la div a pour développer.

    OriginalL'auteur easwee

  3. 1

    Le fond consistent en une couleur unie? Si oui, vous pouvez également utiliser RGBa pour sélectionner un arrière-plan transparent de couleur pour la div qui n'est pas héritée par ses enfants. Lire RGBa Prise En Charge Du Navigateur pour plus d'informations, une solution de contournement pour IE et une autre solution.

    Si l'arrière-plan de la div n'est pas solide, vous pouvez utiliser une image PNG transparente en arrière-fond. N'oubliez pas d'utiliser AlphaImageLoader dans IE6 (et 5.5).

    OriginalL'auteur Marcel Korpel