pero - fondo opaco css
Cómo cambiar la opacidad del color de fondo en CSS (5)
No muy seguro de agregar opacidad a través de CSS es una buena idea.
La opacidad tiene esa forma divertida de ser aplicada a todo el contenido y a los niños desde donde lo configuraste, con resultados inesperados en una mezcla de colores.
No tiene ningún propósito en ese caso, en mi opinión, para un color bg.
Si desea colocarlo sobre la imagen bg, puede utilizar varios fondos.
este color transparente podría aplicarse mediante un png extra repetido (o no con la posición de fondo),
El gradiente CSS (radial) degradado lineal con colores rgba (comenzando y terminando con el mismo color) también puede lograrlo. Se tratan como imagen de fondo y se pueden usar como filtro.
Ídem para texto, si desea que sean un poco transparentes, use rgba (está bien para poner texto-sombra juntos).
Creo que hoy en día, podemos abandonar el comportamiento divertido de la opacidad CSS.
Aquí tienes una mezcla de rgba usada para opacidad si tienes curiosidad por dabblet.com/gist/5685845
Esta pregunta ya tiene una respuesta aquí:
Tengo un archivo PNG que le doy un color de fondo a sus áreas transparentes, pero me gustaría hacer que el color de fondo sea un poco transparente, como la opacidad. Aquí está mi código hasta ahora:
social img{
opacity:0.5;
}
.social img:hover {
opacity:1;
background-color:black;
}
Use rgba ya que la mayoría de los navegadores utilizados comúnmente lo admiten.
.social img:hover {
background-color: rgba(0, 0, 0, .5)
}
Use valores RGB combinados con opacidad para obtener la transparencia que desea.
Por ejemplo,
<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>
Del mismo modo, con valores reales sin opacidad, se dará lo siguiente.
<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>
Puedes echar un vistazo a este EJEMPLO DE TRABAJO .
Ahora, si nos dirigimos específicamente a su problema, aquí está la DEMO DE TRABAJO ESPECÍFICA DE SU PROBLEMA .
El HTML
<div class="social">
<img src="http://www.google.co.in/images/srpr/logo4w.png" border="0" />
</div>
El CSS:
social img{
opacity:0.5;
}
.social img:hover {
opacity:1;
background-color:black;
cursor:pointer;
background: rgb(255, 0, 0) ; opacity: 0.5;
}
Espero que esto ayude ahora.
Utilice RGBA así: background-color: rgba(255, 0, 0, .5)
background: rgba(0,0,0,.5);
puede usar rgba para la opacidad, solo funcionará en ie9 + y mejores navegadores