Comment obtenir un fond translucide avec du texte opaque?

J'essaie cette méthode, je viens de mettre 2 divs, je styler le premier à publier l'arrière-plan et le rendre translucide et je styler le premier à le rendre opaque:Comment obtenir un fond translucide avec du texte opaque?

Voici le code:

<div id="container"> 
    <div id="opaquetext"> 
     This is a normal text 
     on a translucent background 
    </div> 
</div>

et CSS:

#container { 
     background-color: #ffffff; /* the background   */ 
     filter:alpha(opacity=50); /* Internet Explorer  */ 
     -moz-opacity:0.5;   /* Mozilla 1.6 and below */ 
     opacity: 0.5;    /* newer Mozilla and CSS-3 */ 
    } 
    #opaquetext { 
     filter:alpha(opacity=100); /* discarded */ 
     -moz-opacity:1.0;   /* discarded */ 
     opacity: 1.0;    /* discarded */ 
    }

Je pensais que cela fonctionnerait, mais pour une raison quelconque, il rend le texte trop transparent.

Source

2010-12-11 lisovaccaro

Spécifiez les arrière-plans en utilisant rgba() au lieu de # ... ou rgb() où le dernier argument de rgba indique l'opacité de l'arrière-plan. L'opacité sert à définir l'opacité de l'élément entier. Par exemple:

background: rgba(255, 0, 0, 0.2)

Plus d'informations à ce sujet: http://www.css3.info/preview/rgba/

Mais il peut poser des problèmes de compatibilité avec les anciens navigateurs et par exemple. Si vous souhaitez prendre en charge les navigateurs plus anciens, vous devriez envisager d'utiliser une image d'arrière-plan transparente comme spécifié dans la réponse de boltclock.

Source

2010-12-11 05:43:00 crodjer

Merci, je donne une putain de IE! – lisovaccaro

bien, je ne considère pas [IE] (http://www.rohanjain.in/ie) comme un navigateur: P – crodjer

Les styles d'opacité affectent l'affichage d'un élément entier - ses couleurs d'arrière-plan et de premier plan. Les styles sont également multipliés par un arbre d'éléments. En d'autres termes, votre intérieur div est simplement en cours de style pour avoir 100% d'opacité de l'extérieur div. 100% de 50% d'opacité signifie qu'il affiche la même opacité que l'élément parent: 50%.

Il existe deux solutions de contournement, dont aucun ne nécessitent deux div s, les deux qui vous permettent de spécifier color: #000000 pour votre texte comme d'habitude:

utiliser une image d'arrière-plan transparent
^{IE ne supporte pas ceci avant IE7}
Utilisez background-color: rgba(255, 255, 255, 0.5)
^{IE ne supporte pas avant IE9, sapin eFox ne supporte pas avant 3,5}

Source

2010-12-11 05:43:09 BoltClock

Opacité héritant est le comportement standard de tous les navigateurs. Si vous voulez que les dis héritées div de l'enfant sur l'opacité, vous avez deux choix:

en utilisant la position absolue dans le style de # opaquetext:

#opaquetext { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    filter:alpha(opacity=100); /* worked */ 
    -moz-opacity:1.0;   /* worked */ 
    opacity: 1.0;    /* worked */ 
}

à l'aide du logiciel photo/image pour faire un fond avec l'opacité désirée, et laisser tomber l'opacité dans css.

ref:

Source

2010-12-11 05:58:33 Kevin

Comment obtenir un fond translucide avec du texte opaque?

Répondre

Questions connexes