Cómo cambiar el color de una imagen en el vuelo estacionario

Question

Necesito cambiar el color de fondo de una imagen. La imagen es una imagen circular con fondo blanco. Necesito cuando pasas el cursor sobre ella para cambiar el fondo de la imagen del círculo a azul. Solo necesito que el círculo cambie.

Mi código HTML es

<div class="fb-icon"> 
<a href="http://www.facebook.com/mypage" target="_blank"> 
<img src="images/fb_normal.png" alt="Facebook"> 
</a> 
</div> 

En CSS escribí:

.fb-icon:hover { 
    background: blue; 
} 

El código anterior me da el color azul, sino como un marco alrededor del icono de círculo. lo que necesito es cambiar el fondo del círculo en sí. Imagina que es como una señal de que está blanca cuando pasas el mouse sobre el azul.

Necesito una solución si se puede hacer por CSS o lo que sea. Lo siento si lo hago demasiado tiempo.

El problema: link

Answer 1

Idealmente, debe utilizar un PNG transparente con el círculo en blanco y el fondo de la imagen transparente. Luego puede configurar background-color del .fb-icon en azul al pasar el mouse. Por lo que está CSS sería:

fb-icon{ 
    background:none; 
} 

fb-icon:hover{ 
    background:#0000ff; 
} 

Además, si usted no desea utilizar PNG también se puede utilizar un sprite y alterar la posición de fondo. Un sprite es una imagen grande con una colección de imágenes más pequeñas que se puede utilizar como imagen de fondo al cambiar la posición de fondo. Por ejemplo, si su imagen original del círculo con el fondo blanco es 100px X 100px, puede aumentar la altura de la imagen a 100px X 200px, de modo que la mitad superior sea la imagen original con el fondo blanco, mientras la mitad inferior es la nueva imagen con el fondo azul. A continuación, se establece la configuración de su CSS:

fb-icon{ 
    background:url('path/to/image/image.png') no-repeat 0 0; 
} 

fb-icon:hover{ 
    background:url('path/to/image/image.png') no-repeat 0 -100px; 
} 

Answer 2

Si he entendido bien, entonces sería más fácil si usted dio su imagen de fondo transparente y establecer la propiedad background-color de fondo del contenedor sin tener que utilizar filtros y así sucesivamente.

http://www.ajaxblender.com/howto-convert-image-to-grayscale-using-javascript.html

Muestra cómo utilizar filtros en el IE. Tal vez si aprovechas algo de eso. Sin embargo, no es muy compatible con varios navegadores. Otra opción podría ser tener dos imágenes y usarlas como imágenes de fondo (en lugar de etiquetas de img), intercambiar una detrás de otra con el selector de pseudónimo: hover.

Answer 3

Ok, intente esto:

obtener la imagen con el círculo transparente - http://i39.tinypic.com/15s97vd.png poner esa imagen en un elemento html y cambiar el color de fondo de ese elemento a través de CSS. De esta forma, obtiene el logotipo con el círculo en el color definido en la hoja de estilo.

El html

<div class="badassColorChangingLogo"> 
    <img src="http://i39.tinypic.com/15s97vd.png" /> 
    Or download the image and change the path to the downloaded image in your machine 
</div> 

El css

div.badassColorChangingLogo{ 
    background-color:white; 
} 
div.badassColorChangingLogo:hover{ 
    background-color:blue; 
} 

Tenga en cuenta que esto no trabajará en la no-alfa navegadores capaces como IE6, IE7 e. por ejemplo, puede usar una solución js. Google ddbelated png fix y puedes obtener el script.

Answer 4

Es un poco tarde, pero me encontré con esta publicación.

No es perfecto, pero esto es lo que hago.

Código HTML

<div class="showcase-menu-social"><img class="margin-left-20" src="images/graphics/facebook-50x50.png" alt="facebook-50x50" width="50" height="50" /><img class="margin-left-20" src="images/graphics/twitter-50x50.png" alt="twitter-50x50" width="50" height="50" /><img class="margin-left-20" src="images/graphics/youtube-50x50.png" alt="youtube-50x50" width="50" height="50" /></div> 

Código CSS

.showcase-menu { 
    margin-left:20px; 
    margin-right:20px; 
    padding: 0px 20px 0px 20px; 
    background-color: #C37500; 
    behavior: url(/css/border-radius.htc); 
    border-radius: 20px; 
    } 

.showcase-menu-social img:hover { 
    background-color: #C37500; 
    opacity:0.7 !important; 
    filter:alpha(opacity=70) !important; /* For IE8 and earlier */ 
    box-shadow: 0 0 0px #000000 !important; 
} 

Ahora mi radio de borde de 20 píxeles coincide exactamente con el radio imagen Frontera. Como puede ver, el menú .showcase tiene el mismo fondo que .showcase-menu-social. Lo que hace es permitir que la "opacidad" surta efecto y no se muestra ningún fondo o borde "cuadrado", por lo que la imagen reduce ligeramente su saturación al pasar el mouse.

Es un efecto agradable y le da al espectador la opinión de que la imagen está enfocada. Estoy bastante seguro sobre un fondo más oscuro, tendría incluso un mejor efecto.

Lo bueno es que este es un código HTML-CSS válido y se validará. Para ser honesto, debería funcionar en elementos que no sean imágenes tan buenos como las imágenes.

¡Disfrútalo!

Answer 5

Utilice la propiedad de color de fondo en lugar de la propiedad de fondo en su CSS. Así su código se verá así:
.fb-icon:hover {
background: blue;
}

Answer 6

Una solución alternativa sería usar la nueva funcionalidad de imagen de la máscara CSS que funciona en todo, aparte de IE (todavía no se admite en EI11). Esto sería más versátil y fácil de mantener que algunas de las otras soluciones sugeridas aquí. También podría, en general, usar SVG. p.

item { mask: url('/mask-image.png'); } 

Hay un ejemplo del uso de la imagen de una máscara aquí:

http://codepen.io/zerostyle/pen/tHimv 

y un montón de ejemplos aquí:

http://codepen.io/yoksel/full/fsdbu/