Ho un file PNG che conferisco un colore di sfondo alle sue aree trasparenti, ma vorrei rendere il colore di sfondo un po 'trasparente, come l'opacità. Ecco il mio codice finora:Come modificare l'opacità del colore di sfondo nei CSS
social img{
opacity:0.5;
}
.social img:hover {
opacity:1;
background-color:black;
}
background: rgba(0,0,0,.5);
è possibile utilizzare RGBA per l'opacità, funzionerà solo in IE9 + e browser migliori
Usa RGBA come questo: background-color: rgba(255, 0, 0, .5)
Utilizzare RGB valori combinati con opacità per ottenere la trasparenza che desideri.
Ad esempio,
<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>
Analogamente, con i valori effettivi senza opacità, darà sottostante.
<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>
Si può avere uno sguardo a questo WORKING EXAMPLE.
Ora, se ci occupiamo in modo specifico del problema, ecco lo WORKING DEMO SPECIFIC TO YOUR ISSUE.
Il codice HTML
<div class="social">
<img src="http://www.google.co.in/images/srpr/logo4w.png" border="0" />
</div>
Il CSS:
social img{
opacity:0.5;
}
.social img:hover {
opacity:1;
background-color:black;
cursor:pointer;
background: rgb(255, 0, 0) ; opacity: 0.5;
}
Spero che questo aiuti adesso.
Si noti che l'utilizzo di qualcosa del tipo:
Non è sicuro di aggiungere l'opacità tramite CSS è una buona idea.
Opacity ha quel modo divertente per essere applicato a tutti i contenuti e i childs da cui lo hai impostato, con risultati imprevisti in vari colori.
Non ha davvero scopo in questo caso, per un colore bg, a mio parere.
Se desideri posizionarlo al passaggio del mouse sull'immagine bg, puoi utilizzare più sfondi.
questo colore trasparente potrebbe essere applyed tramite un png supplementare ripetute (o meno con background-position),
CSS gradiente (radial-) lineare gradiente con colori RGBA (iniziano e terminano con lo stesso colore) può raggiungere anche questo. Sono trattati come immagine di sfondo e possono essere utilizzati come filtro.
Idem per il testo, se li vuoi un po 'trasparenti, usa rgba (okay per mettere insieme text-shadow).
Penso che oggi, possiamo abbandonare il comportamento divertente dell'opacità CSS.
Qui è un misto di RGBA utilizzati per l'opacità se siete curiosi dabblet.com/gist/5685845
Usa RGBA come la maggior parte dei browser comunemente utilizzati supporti esso ..
.social img:hover {
background-color: rgba(0, 0, 0, .5)
}
È possibile modificare l'opacità con un colore di sfondo rgb già impostato? – andufo