Filtre CSS en tant que modificateur de couleur pour une image

Est-il possible de changer, avec le CSS, les méthodes de filtrage comme HueRotate, de la Saturation et de la Luminosité, de la couleur d'un PNG dessiné totalement blanc? Comme Photoshop effet de superposition de couleurs, mais dans le CSS.

Ce serait une bonne solution pour éviter la création d'un grand nombre d'images qui changent de couleur. Par exemple, un jeu d'icônes qui ont l'obscurité et la lumière des versions pour une INTERFACE utilisateur.

source d'informationauteur Mateus Leon | 2013-06-28

  1. 24

    Vous pouvez également colorer les images en blanc par l'ajout de sépia et puis un peu la saturation, la teinte de rotation, par exemple dans le CSS:

    filter: sepia() saturate(10000%) hue-rotate(30deg)

    Ceci devrait faire des blancs de l'image comme image verte.

    http://jsbin.com/xetefa/1/edit

  2. 7

    C'est une bonne idée, mais il ne fonctionnera pas avec une image blanche comme vous le suggérez. Vous pouvez le faire avec une image couleur en image, mais pas si c'est tout blanc. J'ai essayé les en Safari à l'aide de la version de webkit de la CSS filter:

    <div style="background-color:#FFF; -webkit-filter: hue-rotate(90deg); width:100px; height:100px; border:1px solid #000;"></div>

    Mais la zone reste blanc. Si je change la couleur de bleu comme ceci:

    <div style="background-color:#00F; -webkit-filter: hue-rotate(90deg); width:100px; height:100px; border:1px solid #000;"></div>

    Je reçois une boîte rouge. C'est parce que le filtre fonctionne sur la valeur de la teinte qui n'est pas présent dans le blanc ou le noir.

  3. 4

    Essayez de faire brightness plus de 100%. Vous remarquerez que l'image va commencer à s'estomper blanc comme vous vous déplacez plus loin au-dessus de 100%. L'obscurité de l'image permettra de déterminer à quelle distance de 100% que vous devez déplacer.

    img {

      -webkit-filter: brightness(1000%);

}

    Rappelez-vous que seul Google Canaries, les utilisateurs peuvent voir CSS3 Filtres et Filtres CSS3 n'affectent pas l'image dans n'importe quel autre navigateur. (jusqu'à présent du moins).

  4. 4

    Fait, il y a heureusement est une!

    La principale difficulté ici comme mentionné précédemment, il n'y a pratiquement pas de couleur dans une image en niveaux de gris. Heureusement, il y a un filtre qui permet de pomper dans un peu de couleur!

    sepia(100%)

    J'ai essayé le code css suivant le style sur une solide image en couleur, dont la couleur de base est #ccc

    sepia(100%) contrast(50%) saturate(500%) hue-rotate(423deg)

    J'ai été capable de changer l'image de la couleur d'un citron vert.

    Profiter de 😉