Comment définir l'opacité sur la div conteneur et non pas sur les enfants de texte?

J'ai un DIV avec la règle de style CSS opacity: 0.4;.

À l'intérieur de la div il y a un a étiquette et le texte a également une opacité.

Comment puis-je déclarer pour le texte: opacity :1 ou de toute bonne idée....
Vous pouvez le voir dans le lien suivant:http://yagen.org/

La galerie au-dessus de la page.

OriginalL'auteur treenet | 2011-12-11

  1. 22

    Si vous définissez l'opacité d'un élément, l'opacité est définie pour l'ensemble de ses enfants. Si vous voulez opaque texte sur un arrière-plan transparent, jetez un oeil à RGBa.

    Le résultat devrait ressembler à quelque chose comme ceci:

    .mycontainer {
    background: rgb(60, 60, 60);
    background: rgba(60, 60, 60, 0.4);
}

.mycontainer a {
    color: #fff;
}

    La première déclaration de fond sert de secours en cas d'un navigateur ne supporte pas de couleur Rvba - il sera simplement une couleur unie au lieu de cela.

    Voici une excellente référence pour la couleur Rvba: https://css-tricks.com/rgba-browser-support/

    BON!!!! Très sympa! Mais ne fonctionne pas sous IE....
    Malheureusement, c'est à dire ne prend pas en charge rgba jusqu'à ce que IE 9.
    c'est un bon endroit pour utiliser la technique de l'amélioration progressive, - les navigateurs qui le supportent un peu plus de l'attrait visuel, mais les autres ne sont pas laissés de côté. Les utilisateurs de navigateurs plus anciens ne sauront jamais la différence, et il n'a pas d'impact sur leur capacité à utiliser le site.

    OriginalL'auteur derekerdmann

  2. 3

    Si vous avez votre code de ce genre:

    <div id="container">
    <p>
        Darn fanatically far and tarantula jeepers meek a secret much so hence underneath monogamously interwove apart gosh spilled far where and badger.
    </p>
    <a href="#">This is a link</a>
</div>

    Même si votre CSS est ce.

    #container {
    background: #000;
    color: #fff;
    opacity: 0.4;
}

#container a {
    color: #ff0450;
    opacity: 1;
}

    Il ne fera pas le lien ont une plus grande opacité que le récipient, car l'opacité est héritées du parent.

    La seule façon de le faire est d'utiliser rgba valeurs, mais il ne fonctionne pas dans IE.

    La façon correcte de le faire est-ce -

    #container {
    background: rgba(0,0,0,0.4);
    color: #fff;
}

    Prendre un coup d'oeil à ce violon

    OriginalL'auteur Aniket

  3. 0

    Salut Voici l'exemple simple

    html

      <section class="op5">
    <div class="op1">

    </div>
  </section>

    css

     .op5{
        width:100px;
        height:100px;
        text-align:center;
        background-color:rgba(0,0,0,0.5);
        position:relative;
    }
    .op1{
        width:50px;
        height:50px;
        margin:0 auto;
        opacity:1;
        background-color:red;
    }

    Remarque:- Dans le parent, nous avons utilisé rgba format et dans les enfants de l'élément, nous avons utilisé la propriété d'opacité

    OriginalL'auteur dinesh_malhotra