z-index et de l'opacité des questions

Je suis en train de faire un wrapper à l'arrière de mon DIV qui apparaissent transparent (opacity: 0.6), mais tout ce qui est devant qui apparaît transparent.

Toutes les idées de comment résoudre ce problème?

Vous pouvez trouver l'exemple ici: http://testing.squaretise.com/ (j'ai donné le wrapper (#wrap) une bordure rouge de sorte que vous pouvez interpréter plus facilement)

pouvez-vous poster quelques codes?
pourriez-vous s'il vous plaît poster le code? Pendant ce temps, pour la compréhension de l'ordre d'empilement des éléments avec les z-index et comment opacité va créer un nouveau sous l'empilement de contexte, vous pouvez consulter cet article : philipwalton.com/articles/what-no-one-told-you-about-z-index j'Espère que cela va vous aider.

OriginalL'auteur Liam Macmillan | 2012-12-26

  1. 11

    Utiliser à la place de:

    opacity: 0.6;

    ce:

    background: rgba(255, 255, 255, 0.6);

    La couleur est en RVB et les derniers chiffres sont pour le niveau de transparence.

    Merci! A parfaitement fonctionné.

    OriginalL'auteur h0ussni

  2. 1

    Vous aurez besoin de la position de votre transparent div absolument.

    http://www.w3.org/TR/css3-color/#transparency explique comment les descendants de ramasser la transparence.

    OriginalL'auteur ScottE

  3. 0

    Opacité est héréditaire. Si le parent est de voir à travers, de sorte que ce sont les enfants.

    Une meilleure façon de le faire est de supprimer opacity et définir la couleur d'arrière-plan transparent:

    .foo {
  background: rgba(0,0,0,.5);
}
    “l'Opacité est hérité” – non, il n'est pas (pas dans le sens que le CSS définit “l'héritage”.) S'il l'était, un parent d'avoir opacity: .5 un jeu que l'enfant aurait la même valeur automatiquement (s'il ne dispose pas de sa propre valeur), et donc l'opacité de l'enfant contenu serait .5 * .5 = .25 – parce que les opacités sont multiplié. Au lieu de cela, l'enfant a la valeur par défaut de 1, et à cet effet, son contenu est le même opcaity valeur appliquée en tant que parent, .5 * 1 = .5

    OriginalL'auteur bookcasey

  4. 0

    Vous devez utiliser un fond transparent, au lieu de l'opacité.
    Background-image est le meilleur moyen si vous voulez soutenir IE8. (CSS3 Couleurs: http://caniuse.com/#search=rgba)

    Utilisation data-uri pour de meilleures performances.

    OriginalL'auteur Tymek

  5. -1

    Vous pouvez même le faire avec opacity. Voici un exemple:

    HTML

    <div id="wrapper"> 
    <div id="contentOrWhatever">
    </div>
</div>

    CSS

    body {
    z-index:0;
}
#wrapper {
    z-index:1;
    opacity:0.6;
}
#contentOrWhatever {
    z-index:99;
    opacity:1;
}

    Donc #wrapper ist transparent et est TOUJOURS derrière #contentOrWhatever.
    J'espère que je pourrais vous aider.

    OriginalL'auteur ThermalCube