CSS opacité de la couleur de fond pas le texte sur elle?

Question

Puis-je attribuer la propriété d'opacité de la couleur de fond d'un div et pas seulement pour le texte sur elle?

background: #CCC;
opacity:0.6;

Answer 1

Il semble que vous souhaitez utiliser un arrière-plan transparent, auquel cas vous pouvez essayer d'utiliser l' rgba() fonction de:

rgba()

Les couleurs peuvent être définies dans le Rouge-vert-bleu-modèle alpha (RGBa) à l'aide de l' rgba() fonctionnelle de la notation. RGBa s'étend le modèle de couleur RVB pour inclure le canal alpha, permettant la spécification de l'opacité d'une couleur.
a moyen opacity: 0=transparent; 1=opaque;

rgba(255,0,0,0.1)    /* 10% opaque red */  
rgba(255,0,0,0.4)    /* 40% opaque red */  
rgba(255,0,0,0.7)    /* 70% opaque red */  
rgba(255,0,0,  1)    /* full opaque red */ 

Exemple d'utilisation:

#div {
    background: rgb(54, 25, 25); /* Fall-back for browsers that don't
                                    support rgba */
    background: rgba(54, 25, 25, .5);
}

Démo

Vérifier http://caniuse.com/#search=rgba voir le support des navigateurs

Answer 2

La façon la plus simple de le faire est avec 2 divs, 1 à l'arrière-plan et 1 avec le texte:

HTML:

<div id="container">
        <div id="block"></div>
        <div id="text">Test</div>
</div>

CSS:

#container {
    position: relative;
    width: 300px; height: 200px;
}
#block  {
    background: #CCC;
    filter:alpha(opacity=60); /* IE */
    -moz-opacity:0.6; /* Mozilla */
    opacity: 0.6; /* CSS3 */
    position: absolute;
    top: 0; left: 0;
    height: 100%; width:100%;
}
#text {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

Answer 3

J'ai eu le même problème. Je veux 100% Transparent couleur d'arrière-plan, il suffit d'utiliser ce code, sa a très bien fonctionné pour moi:

rgba(54, 25, 25, .00004);

Vous pouvez voir des exemples sur le côté gauche de cette page (le formulaire de contact de la zone)

Answer 4

Cela fonctionne avec tous les navigateurs

div {
 -khtml-opacity:.50; 
 -moz-opacity:.50; 
 -ms-filter:"alpha(opacity=50)";
  filter:alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
  opacity:.50; 
}

Si vous ne voulez pas de transparence à affecter l'ensemble du conteneur et c'est les enfants, cochez cette solution de contournement. Vous devez avoir un positionnement absolu de l'enfant avec un positionnée relativement parent pour atteindre cet objectif. http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

Vérifier le travail de démonstration à http://www.impressivewebs.com/demo-files/css-opacity/css-opacity-demo.html

Answer 5

Mon astuce est de créer un transparent .png avec la couleur et l'utilisation background:url().