Pas d'opacité sur div dans un div avec opacité

- Je utiliser les asp.net ajax toolkit pour une tâche et ce que je fais est d'afficher une div sur l'ensemble de l'écran lorsqu'une mise à jour des progrès de contrôle est déclenché. La div principale (qui couvre la totalité de l'écran) est d'avoir un peu d'opacité, mais quand j'essaie d'avoir un div à l'intérieur de ce que l'on obtient également un peu d'opacité, même si je l'ai mis à none;

Exemple HTML:

<ProgressTemplate>
            <div class="updateProgressBox">
                <div class="updateProgressMessage">
                    <p>Processing request..</p>
                </div>
            </div>
</ProgressTemplate>

Et CSS:

.updateProgressBox {
    top: 0px; 
    height: 100%; 
    background-color:Gray;
    opacity:0.7; 
    filter:alpha(opacity=70);
    vertical-align: middle; 
    left: 0px; 
    z-index: 999999; 
    width: 100%; 
    position: absolute;
    text-align: center;   
}

.updateProgressMessage {
    border: black 2px solid;
    background-color: #fff;
    z-index: 1000000;   
    padding: 20px;
    opacity:1.0; 
    filter:alpha(opacity=100);
    margin: 300px auto auto auto;
    font-weight: bold; 
    vertical-align: middle;
    width: 200px; 
    text-align: center
}

Que dois-je faire pour faire de la div avec le message n'avons pas la transparence et blanc couleur d'arrière-plan?

source d'informationauteur Nick

  1. 35

    Pour surmonter ce problème, utilisez la RGBA propriété background du div parent background: rgba(64, 64, 64, 0.5). 64, 64, 64 sont des valeurs de couleur RVB. et de 0,5 est la valeur d'opacité. Maintenant parent peut avoir sa propre valeur d'opacité qui ne sera pas hérité de ses enfants. C'est entièrement pris en charge par FireFox, Opéra, Chrome, Safari et IE9.

    Vérifier exemple de travail à http://jsfiddle.net/Rp5BN/

    Pour soutenir IE 5.5 à 8, nous avons besoin d'utiliser des fournisseurs spécifiques CSS 'gradient filtre:" Si vous avez besoin d'ajouter ceci.

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f404040, endColorstr=#7f404040);

    Où 7f représente 127, c'est à dire 50% d'opacité et de 404040 est la couleur.

    Vérifier exemple de travail dans IE http://jsfiddle.net/Rp5BN/2/

  2. 9

    opacity est héréditaire et il ne peut pas être réinitialisé.

    Vous pouvez...

    • Utiliser une image d'arrière-plan d'un 24bit PNG avec la transparence alpha.
    • Faire l'autre élément pas un enfant.
    • Utilisation Hussein suggestion de l'aide rgba().
  3. 1

    Pour ce faire, vous devez utiliser une LED de couleur sur le fond lui-même que les changements d'opacité de la couche alpha pour tous les nœuds enfants à l'intérieur de l'élément parent lui-même. E. g.

    .div {
    background-color: rgba(255,0,0, .5);
}