web-dev-qa-db-fra.com

Assombrir une image avec CSS (dans n'importe quelle forme)

J'ai donc vu plusieurs façons d'assombrir les images avec CSS, y compris celles avec des coins arrondis, mais mon problème est différent.

Supposons que j'ai une image .png qui ressemble à un petit chien (allez-y, je n'ai pas de bons exemples), quand je la place sur ma page, je lui donne des dimensions de 100 x 100.

Mais je ne peux pas simplement superposer quelque chose sur celui-ci, ou teinter l’ensemble de l’image, car le fond du chien sera également teinté, ce qui est moche.

Est-il possible de teinter une image de forme arbitraire avec CSS?

(Je suppose que vous comprenez ce que je veux dire et qu'un code inutile n'est pas nécessaire)

Merci!

csspngtint
24
Josiah

Vous pouvez toujours changer l'opacité de l'image, étant donné la difficulté de toute alternative, cela pourrait être la meilleure approche.

CSS:

.tinted { opacity: 0.8; }

Si vous êtes intéressé par une meilleure compatibilité de navigateur, je vous suggère de lire ceci:

http://css-tricks.com/css-transparency-settings-for-all-broswers/

Si vous êtes assez déterminé, vous pouvez le faire fonctionner aussi loin que IE7 (qui le savait!)

Remarque: Comme le souligne JGonzalezD ci-dessous, cela ne fait en réalité assombrir l'image que si la couleur d'arrière-plan est généralement plus sombre que l'image elle-même. Bien que cette technique puisse toujours être utile si vous ne souhaitez pas assombrir spécifiquement l'image, mais que vous souhaitez plutôt la mettre en surbrillance sur le survol/la mise au point/un autre état pour une raison quelconque.

21
Sean

Facile comme

img {
  filter: brightness(50%);
}
89
The Whiz of Oz

Je voudrais faire une nouvelle image de la silhouette du chien (noir) et le reste identique à l'image d'origine. Dans le code HTML, ajoutez un div wrapper avec cette silhouette comme arrière-plan. Maintenant, rendez l'image originale semi-transparente. Le chien deviendra plus sombre et le fond du chien restera le même. Vous pouvez faire: survolez les astuces en définissant l'opacité de l'image d'origine à 100% en survol. Ensuite, le chien apparaît lorsque vous passez la souris sur lui!

style

.wrapper{background-image:url(silhouette.png);} 
.original{opacity:0.7:}
.original:hover{opacity:1}

<div class="wrapper">
  <div class="img">
    <img src="original.png">
  </div>
</div>
2
JSSR

Webkit only solution

Solution de remplacement, dépend de la propriété -webkit-mask-image . -webkit-mask-image définir une image de base pour un élément.

Existem algumas dicas avec méthode:

  • Bien sûr, il y a beaucoup de choses à faire au sujet de Webkit
  • Vérifiez que tous les éléments de base sont remplacés par l'élément :after (balises IMGpas de podem ter :before/:after pseudo-éléments, grr)
  • Cliquez ici pour en savoir plus, nous vous recommandons d'utiliser une fonctionnalité CSS attr(…) pour obtenir une URL pour une balise IMGname__, qui a été codifiée sans code CSS distinct.

Il est conseillé de consulter tous les problèmes, mais aussi de choisir une solution. Nos filtres SVG seront disponibles dans les formats disponibles. Cliquez sur le lien suivant pour obtenir plus de détails et une plus grande variété de données (sans changer de contenu depuis Android 2.x).

0
thirdender