Comment changer l'opacité de la couleur de fond dans CSS [dupliquer]

Cette question a déjà une réponse ici:

j'ai un fichier PNG que je donne une couleur d'arrière-plan à ses zones transparentes, mais je voudrais rendre la couleur d'arrière-plan un peu transparente, comme l'opacité. Voici mon code pour loin:

social img{
    opacity:0.5;
}
.social img:hover {
    opacity:1;
    background-color:black;
}
12
demandé sur Alex Jj 2013-06-02 19:43:05

5 réponses

background: rgba(0,0,0,.5);

vous pouvez utiliser rgba pour l'opacité, ne fonctionnera que dans ie9+ et de meilleurs navigateurs

28
répondu bob 2013-06-02 15:46:34

Utiliser RGBA comme ceci: background-color: rgba(255, 0, 0, .5)

3
répondu bookcasey 2013-06-02 15:46:43

Utilisez rgba comme la plupart des navigateurs couramment utilisés le supporte..

.social img:hover {
 background-color: rgba(0, 0, 0, .5)
}
2
répondu Mohd. Umar 2013-06-02 17:43:47

Utiliser RGB valeurs combinées avec opacity pour obtenir de la transparence que vous souhaitez.

Par exemple,

<div style=" background: rgb(255, 0, 0) ; opacity: 0.2;">&nbsp;</div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.4;">&nbsp;</div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.6;">&nbsp;</div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.8;">&nbsp;</div>
<div style=" background: rgb(255, 0, 0) ; opacity: 1;">&nbsp;</div>

de la même façon, avec les valeurs réelles sans opacité, donnera ce qui suit.

<div style=" background: rgb(243, 191, 189) ; ">&nbsp;</div>
<div style=" background: rgb(246, 143, 142) ; ">&nbsp;</div>
<div style=" background: rgb(249, 95 , 94)  ; ">&nbsp;</div>
<div style=" background: rgb(252, 47, 47)   ; ">&nbsp;</div>
<div style=" background: rgb(255, 0, 0)     ; ">&nbsp;</div>

Vous pouvez jeter un oeil à ce EXEMPLE PRATIQUE.

Maintenant, si nous ciblons spécifiquement votre problème, voici le DÉMO DE TRAVAIL SPÉCIFIQUE À VOTRE QUESTION.

le HTML

<div class="social">
    <img src="http://www.google.co.in/images/srpr/logo4w.png" border="0" />
</div>

The CSS:

social img{
    opacity:0.5;
}
.social img:hover {
    opacity:1;
    background-color:black;
    cursor:pointer;
    background: rgb(255, 0, 0) ; opacity: 0.5;
}

J'espère que cela aidera maintenant.

1
répondu Nitesh 2013-06-02 15:59:20

pas trop sûr d'ajouter de l'opacité via CSS est une si bonne idée.

L'opacité a cette drôle de façon d'être appliqué à tous les contenus et les childs de l'endroit où vous le mettez, avec des résultats inattendus dans un mélange de couleurs.

Il n'a pas vraiment de but dans ce cas , pour une couleur bg, à mon avis.

Si vous souhaitez la poser sur l'image BG, vous pouvez utiliser plusieurs arrière-plans.

cette couleur transparente pourrait être appliquée via un png supplémentaire répété (ou non avec background-position),

Gradient CSS (radial -) linear-gradient avec des couleurs rgba (en commençant et se terminant avec la même couleur) peut y parvenir aussi. Ils sont traités comme image d'arrière-plan et peuvent être utilisés comme filtre.

Idem pour le texte, si vous voulez un peu de transparence, utilisez rgba (OK pour mettre texte-ombre ensemble).

je pense qu'aujourd'hui, nous pouvons laisser tomber le comportement drôle de CSS opacity.

voici un mélange de rgba utilisé pour opacité si vous êtes curieux dabblet.com/gist/5685845

1
répondu G-Cyr 2013-06-02 17:05:53