web-dev-qa-db-fra.com

Comment changer l'opacité de la couleur d'arrière-plan en CSS

J'ai un fichier PNG auquel 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 jusqu'à présent:

social img{
    opacity:0.5;
}
.social img:hover {
    opacity:1;
    background-color:black;
}
csscss3backgroundpngopacity
19
Alex Jj
background: rgba(0,0,0,.5);

vous pouvez utiliser rgba pour l'opacité, ne fonctionnera que dans les navigateurs ie9 + et supérieurs

34
bob

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

3
bookcasey

Utilisez rgba car la plupart des navigateurs couramment utilisés le prennent en charge.

.social img:hover {
 background-color: rgba(0, 0, 0, .5)
}
2
Mohd. Umar

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ée à tout le contenu et aux enfants de l'endroit où vous le définissez, avec des résultats inattendus dans un mélange de couleurs.
Cela n'a pas vraiment de sens dans ce cas, pour une couleur bg, à mon avis.
Si vous souhaitez la placer en survol de 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 la position d'arrière-plan),
Gradient CSS (radial -) gradient linéaire avec les couleurs rgba (commençant et se terminant avec la même couleur) peut également réaliser cela. Ils sont traités comme image de fond et peuvent être utilisés comme filtre.
Idem pour le texte, si vous voulez qu'ils soient un peu transparents, utilisez rgba (ok pour assembler text-shadow).

Je pense qu'aujourd'hui, nous pouvons abandonner un comportement amusant d'opacité CSS.

Voici un mélange de rgba utilisé pour l'opacité si vous êtes curieux dabblet.com/Gist/5685845

1
G-Cyr

Utilisez les valeurs [~ # ~] rgb [~ # ~] combinées à l'opacité pour obtenir 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 même, avec des valeurs réelles sans opacité, vous obtiendrez 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 voir ceci EXEMPLE DE TRAVAIL .

Maintenant, si nous ciblons spécifiquement votre problème, voici le TRAVAIL DEMO SPÉCIFIQUE À VOTRE PROBLÈME .

Le HTML 

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

Le 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 aide maintenant.

1
Nitesh