CSS opacité et les éléments enfants

<style type="text/css">
div#foo {
    background: #0000ff;
    width: 200px;
    height: 200px;

    opacity: 0.30;
    filter: alpha(opacity = 30);
}
div#foo>div {
    color: black;
    opacity:1;
    filter: alpha(opacity = 100);
}
</style>

<div id="foo">
    <div>Lorem</div>
    <div>ipsum</div>
    <div>dolor</div>
</div>

Dans l'exemple ci-dessus, l'opacité de div#foo est héritée par les éléments enfants, provoquant le texte presque illisible. Je suppose que c'est faux de dire que c'est héréditaire, l'opacité est appliqué à la div parent et les enfants sont de la partie, donc de tenter de la contourner pour les éléments d'enfant ne fonctionne pas parce que techniquement, ils sont opaques.

En général, je viens d'utiliser un alpha png image d'arrière-plan dans de tels cas, mais aujourd'hui, je me demande si il ya une meilleure façon de faire un background d'une div semi-transparent, sans affecter le contenu.

InformationsquelleAutor Rob | 2010-04-01
  1. 37

    Vous pouvez utiliser rgba().

    div#foo
{
    background: rgba(0, 0, 255, 0.3);
}

    Pour le faire fonctionner dans le vieux-Internet Explorateurs utilisation CSS TARTE. Il y a certaines limitations, mais celles-ci sont traitées dans un rétro-compatible façon: la valeur RVB sera restituée correctement et l'opacité sera ignoré.

    • J'ai écrit au sujet de l'utiliser dans une rétrocompatibilité de la mode il y a un moment: dorward.moi.royaume-uni/www/css/alpha-couleur
    • Merci, j'ai appris quelque chose! Malheureusement, il ne semble pas fonctionner dans IE7.
    • merci pour le lien utile
    • Son CSS 3. IE8 a été la première version de IE annoncé comme le fait d'avoir une CSS 2.1 mise en œuvre. Je ne m'attends pas à beaucoup de CSS 3 fonctions jusqu'à la version 9.
    • WOW! Je ne peux pas croire à quel point facile de la TARTE. Comment ai-je pas entendu parler de cela avant? Je ne l'ai testé que quelques choses sur elle ainsi beaucoup, mais tout semble fonctionner à merveille, et c'était SUPER facile 🙂 Bon travail, c'est à dire! Avec cela et les commentaires conditionnels, je crois que je peux arrêter de critiquer Internet Explorer 🙂
    • bro, vous êtes génial, merci beaucoup

    InformationsquelleAutor fuxia
  2. 7

    La meilleure façon est mise en png transparent à fond..

    InformationsquelleAutor yasink
  3. 5

    Si vous utilisez l'opacité, vous auriez à les mettre en DIV distinctes et puis les aligner ensemble. L'arrière-plan DIV aurait du baisser l'opacité, et de premier plan DIV voudrais avoir votre contenu avec 100% d'opacité.

    • De couleur RVBA est agréable, mais si vous avez besoin de soutien IE8, puis utiliser cette approche. Il suffit d'ajouter le positionnement absolu DIV que le premier enfant de la DIV en question avec la nécessaire le réglage de l'opacité (et l'image de fond si l'alpha blending est requis)
    InformationsquelleAutor Shawn Steward