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;
}
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
Utilisez rgba comme la plupart des navigateurs couramment utilisés le supporte..
.social img:hover {
background-color: rgba(0, 0, 0, .5)
}
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;"> </div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.4;"> </div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.6;"> </div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.8;"> </div>
<div style=" background: rgb(255, 0, 0) ; opacity: 1;"> </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) ; "> </div>
<div style=" background: rgb(246, 143, 142) ; "> </div>
<div style=" background: rgb(249, 95 , 94) ; "> </div>
<div style=" background: rgb(252, 47, 47) ; "> </div>
<div style=" background: rgb(255, 0, 0) ; "> </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.
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