CSS Teinté d'Opacité

Je me demande si il est possible d'appliquer une teinte à une opacité dans le css?

J'ai un PNG de différentes tailles. Lorsque l'utilisateur survole l'PNG, je veux le PNG pour modifier l'opacité à 0,5 avec une teinte de #000. Selon w3schools, vous avez seulement la possibilité de modifier la valeur d'opacité et de ne pas la teinte qui est toujours fixé à #FFF.

J'ai essayé de positionner une boîte noire avec son opacité sur le dessus de mon PNG et via css, avait-il basculer entre display:none/block; sur PNG hover. Cela n'a pas fonctionné comme mon Png ne sont pas des images rectangulaires et sont différentes dimensions du sens de la boîte noire n'a pas seulement couvrir mon PNG.

- Vous d'autres solutions à mon problème?

"Selon w3schools" - s'arrêter là.
Voulez-vous dire w3schools n'est pas une preuve de fiabilité de la source, ou qu'il n'y a pas d'autre alternative?
Ils sont l'une des pires ressources sur le world wide web
Ah, je ne savais pas que. Merci de me laisser savoir.
world wide web lol

OriginalL'auteur Jon | 2013-05-01

  1. 7

    Webkit exemple: http://jsfiddle.net/5APXu/1/

    div:hover { opacity: .5; -webkit-filter: grayscale(100%) sepia(100%); }

    Il utilise le CSS propriété filter, qui commence à gain de soutien. Il existe de nombreux effets possibles, de sorte que vous pouvez probablement obtenir votre désir originel de black/teinte grise.

    Parfait. Merci 🙂
    Pas de problème. Gardez à l'esprit que la prise en charge du navigateur n'est pas terminée, mais vous pouvez utiliser de vieux IE filtres comme un secours, et/ou également envisager de filtres SVG (qui ont plus de prise en charge du navigateur déjà). Dépend de combien d'effort vous voulez mettre.
    Ce travail sur FireFox/IE9+ ?
    Non, sauf si vous allez à images SVG (qui est potentiellement beaucoup plus de travail). Vous pouvez obtenir des effets similaires à l'aide de IE (toutes versions) à l'aide de IE filtres: msdn.microsoft.com/en-us/library/ms532847(v=vs. 85).aspx. Vous pouvez également chercher à masquer l'image à l'aide de CSS (je vais voir si je peux dégoter une référence).
    Je vous remercie. Je suis aussi à la recherche dans les environs.

    OriginalL'auteur Tim Medora

  2. 1

    Vous pouvez appliquer une couleur d'arrière-plan de l'image sur le vol stationnaire pour obtenir l'effet que vous voulez. Voici un exemple: http://jsfiddle.net/atbnn

    img:hover {
  opacity: 0.5;
  background: #000;
}

    OriginalL'auteur Stephen Fischer