web-dev-qa-db-fra.com

Comment changer la couleur du png en survol?

J'ai fait une "flèche vers le bas" dans l'illustrateur et l'ai enregistrée au format png avec un fond transparent. Lorsque je le mets dans ma page Web en tant qu'img, il apparaît dans la couleur d'origine, ce qui est correct. J'essaye de faire

  img:hover{color:red;}

et ça ne marche pas.

Quelqu'un sait-il comment le faire fonctionner?

Merci

htmlcssiconspng
7
pat

Si vous ciblez des navigateurs modernes, vous pouvez utiliser filtres CSS .

Le hue-rotate le filtre convient pour changer les couleurs:

filter: hue-rotate(180deg);
-webkit-filter: hue-rotate(180deg);

La quantité exacte de degrés dépend de votre image et des résultats attendus.

Notez que les filtres CSS sont une nouvelle fonctionnalité, et son la prise en charge du navigateur est limitée .

Alternativement, vous pouvez utiliser la technique CSS sprites , qui fonctionne dans tous les navigateurs d'âge raisonnable.

6
Alex Shesterov

Ce que vous devez faire est de définir l'image comme image d'arrière-plan à l'aide de CSS. Définissez ensuite un état de survol à l'aide d'une autre version de l'image (avec une couleur différente). Par exemple:

.element {
  background-image: url(your-image.png);
}

.element:hover {
  background-image: url(your-image-hover-version.png);
}

Selon l'endroit où vous placez l'image/la classe, vous devrez attribuer une hauteur/largeur appropriée (ou en utilisant un rembourrage).

2
Richard Blyth

Vous pouvez changer la couleur de l'image avec une image identique d'une autre couleur avec un événement (comme le survol).

html:

<div id="cf">
  <img class="bottom" src="/images/Windows%20Logo.jpg" />
  <img class="top" src="/images/Turtle.jpg" />
</div>

css:

   #cf {
      position:relative;
      height:281px;
      width:450px;
      margin:0 auto;
    }

    #cf img {
      position:absolute;
      left:0;
      -webkit-transition: opacity 1s ease-in-out;
      -moz-transition: opacity 1s ease-in-out;
      -o-transition: opacity 1s ease-in-out;
      transition: opacity 1s ease-in-out;
    }

    #cf img.top:hover {
      opacity:0;
    }

En détail ici: http://css3.bradshawenterprises.com/cfimg/

1
Kirk Powell

Je me demandais également comment le faire facilement comme:

.img:hover {
      background: red;
}

ou

.img:hover {
      color: red;
}

mais aucune solution de prise en charge croisée n'a été trouvée. Cependant, j'ai trouvé que certaines des solutions de navigateur utilisaient des images SVG qui ont un attribut fill qui peut être facilement défini par CSS.

Cependant, si vous utilisez font-awesome (fondamentalement, c'est une police où au lieu de caractères, vous avez différentes icônes), il est facile de contrôler avec un simple attribut CSS color, comme dans le seconde exemple

Donc, si vous voulez la solution la plus simple - trouvez des images SVG pour votre projet qui correspondent à celles que vous utilisez. J'ai trouvé ce processus un peu pénible et j'ai décidé d'apprendre à convertir png et .jpg et .png à .svg. Il existe un outil en ligne de commande qui vous aide à le faire et il s'appelle potrace . Une chose que je recommanderais de regarder si vous décidez d'utiliser cet outil est d'utiliser des éditeurs simples pour contraster sombre pour tout ce que vous voulez convertir en path pour le .svg et blanc/clair (non transparent) couleurs à l'arrière-plan et les zones que vous ne voulez pas voir dans votre .svg fichier.

1
kovalyovi

Appliquer:

{color:red}

à n'importe quel élément signifie changer la couleur du texte.

Essayez de changer:

img:hover {color:red}

à:

img:hover {background-image: url('<insert url to red arrow here>');}

et cela fonctionne si vous n'avez qu'une seule image. Si vous avez plusieurs images et que vous ne souhaitez en modifier qu'une seule au survol, définissez un ID pour l'image que vous souhaitez modifier et changez img et img: hover en #x et #x: hover et remplacez x par le nom que vous avez donné pour l identité.

Voici un exemple (supposons qu'un autre HTML est intact et correctement formaté):

<style type="text/css">
#abc:hover {background-image: url('redarrow.png');}
</style>    
<img ID="abc" src="normalarrow.png">
0
user4064342