Comment changer la couleur d'une image en stationnaire

Question

Je dois changer la couleur d'arrière-plan d'une image. L'image est une image circulaire avec un fond blanc, dont j'ai besoin lorsque vous passez la souris sur elle, changez l'arrière-plan de l'image circulaire en bleu. J'ai seulement besoin que le cercle change.

Mon code HTML est

<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 j'ai écrit:

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

Le code ci-dessus me donne la couleur bleue, mais comme un cadre autour de l'icône de cercle. ce dont j'ai besoin, c'est de changer l'arrière-plan du cercle lui-même. Imaginez que c'est comme un signal blanc quand vous passez la souris sur le bleu.

S'il vous plaît j'ai besoin d'une solution si cela peut être fait par CSS ou autre. Désolé si je le fais trop longtemps.

Le problème: link

Answer 1

Idéalement, vous devriez utiliser un format PNG transparent avec le cercle en blanc et l'arrière-plan de l'image transparent. Ensuite, vous pouvez définir le background-color du .fb-icon sur bleu en survol. Donc, vous êtes CSS serait:

fb-icon{ 
    background:none; 
} 

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

De plus, si vous ne voulez pas utiliser png vous pouvez également utiliser un sprite et modifier la position d'arrière-plan. Un sprite est une grande image avec une collection d'images plus petites qui peuvent être utilisées comme image de fond en changeant la position de l'arrière-plan. Ainsi, par exemple, si votre image circulaire originale avec le fond blanc est 100px X 100px, vous pouvez augmenter la hauteur de l'image à 100px X 200px, de sorte que la moitié supérieure soit l'image originale avec le fond blanc, tandis que la moitié inférieure est la nouvelle image avec le fond bleu. Ensuite, vous définissez la configuration de votre CSS comme:

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 si vous avez donné à votre image un fond transparent et définir la propriété de couleur de fond du conteneur de fond je comprends bien, il serait alors plus facile sans avoir à utiliser des filtres et ainsi de suite.

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

vous montre comment utiliser les filtres dans IE. Peut-être que si vous tirer parti de quelque chose de cela. Pas très compatible avec tous les navigateurs. Une autre option pourrait être d'avoir deux images et de les utiliser comme images d'arrière-plan (plutôt que comme balises img), d'en échanger une après l'autre en utilisant le pseudo-sélecteur: hover.

Answer 3

Ok, essayez ceci:

obtenir l'image avec le cercle transparent - http://i39.tinypic.com/15s97vd.png Mettez cette image dans un élément HTML et changer la couleur d'arrière-plan de cet élément via css. De cette façon, vous obtenez le logo avec le cercle dans la couleur définie dans la feuille de style.

Le 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> 

Le css

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

Gardez à l'esprit que cela ne marchera pas sur les navigateurs non compatibles alpha comme IE6 et IE7. par exemple, vous pouvez utiliser un correctif js. Google ddbelated png correctif et vous pouvez obtenir le script.

Answer 4

Il est un peu tard, mais je suis tombé sur ce post.

Ce n'est pas parfait mais voici ce que je fais.

Code 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> 

CSS code

.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; 
} 

Maintenant, mon rayon de frontière de 20px correspond exactement avec le rayon de la bordure de l'image. Comme vous pouvez le voir, le menu .showcase a le même arrière-plan que le .showcase-menu-social. Ce que cela fait est de permettre à l'opacité de prendre effet et de ne pas montrer d'arrière-plan ou de bordure carrée, ainsi l'image réduit légèrement sa saturation en vol stationnaire.

C'est un effet agréable et donne au spectateur le feedback que l'image est au point. Je suis à peu près sûr que sur un fond plus sombre, cela aurait même un meilleur effet.

La bonne chose est que c'est un code HTML-CSS valide et valide. Pour être honnête, cela devrait fonctionner aussi bien sur des éléments non-image que sur des images.

Profitez-en!

Answer 5

Utilisez la propriété background-color au lieu de la propriété background de votre CSS. Donc, votre code ressemblera à ceci:
.fb-icon:hover {
background: blue;
}

Answer 6

Une solution alternative serait d'utiliser la nouvelle fonctionnalité d'image de masque CSS qui fonctionne dans tout sauf IE (toujours pas pris en charge dans IE11). Ce serait plus polyvalent et maintenable que certaines des autres solutions suggérées ici. Vous pouvez également utiliser plus généralement SVG. par exemple.

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

Il est un exemple d'utilisation d'une image de masque ici:

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

et beaucoup d'exemples ici:

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