web-dev-qa-db-fra.com

Teinter l'image en utilisant CSS sans superposition

Est-il possible de teinter une image avec une couleur spécifique en utilisant CSS sans superposition dans un navigateur WebKit?

tentatives infructueuses

  • A réussi à teinter l'image sépia ou une couleur arbitraire en utilisant hue-rotate Mais n'a pas trouvé de moyen de la teindre avec une couleur spécifique.
  • Créer un filtre SVG "teint" et l'appeler avec -webkit-filter: url(#tint) ne fonctionne pas sur Chrome.
  • Toutes les combinaisons possibles de propriétés css opacity/box-shadow Avec les filtres drop-shadow/opacity ne génèrent pas l'effet souhaité.

Idées

  • Étant donné une couleur, ne serait-il pas possible de combiner les filtres HSB (hue-rotate, saturation, brightness) pour générer sa teinte?
csscss3svgwebkitimage-manipulation
34
hpique

Finalement, ce sera le cas, en utilisant shaders. Voir la documentation du W3C sur les filtres.

Pour le moment , ce qui est possible par exemple est:

-webkit-filter: grayscale; /*sepia, hue-rotate, invert....*/
-webkit-filter: brightness(50%);

Voir

Mise à jour :

Adobe a publié ses laboratoires de filtrage CSS basés sur HTML5 avec prise en charge des filtres personnalisés (Shaders) sur navigateurs pris en charge:

enter image description here

23
Lorenz Lo Sauer

Bien qu'il n'y ait pas de filtre de teinte autonome, vous pouvez en créer un par composition des filtres existants sans ombrage.

Combinez le sépia pour unifier la couleur, puis faites pivoter la teinte jusqu'à la couleur avec laquelle vous souhaitez la teindre

-webkit-filter: sepia(90%) hue-rotate(90deg);

J'utilise des bordures avec une valeur alpha pour mes teintes, c'est vraiment une superposition mais n'utilise aucun élément DOM supplémentaire rendant la transition vers sépia + teinte-rotation plus simple lorsque les autres navigateurs obtiennent ces filtres.

16
krs

Cela est possible en utilisant un filtre SVG aujourd'hui sans avoir à utiliser de shaders. Vous pouvez l'utiliser comme filtre CSS (bien qu'il ne fonctionne pas dans IE) via la syntaxe -webkit-filter: "url (#yourfilterID)", etc.

<svg width="800px" height="600px" viewbox="0 0 800 600">
    <defs>
        <filter id="f1" x="0%" y="0%" width="100%" height="100%" color-interpolation-filters="sRGB">
        <feColorMatrix id="tinter" type="matrix" values=".6 .6 .6 0 0 
                                                            .2 .2 .2 0 0 
                                                            .0 .0 .0 0 0 
                                                             0    0   0 1 0"/>
        </filter>     
    </defs>

 <image x="0" y="0" width="550" height="370" preserveAspectRatio="true"
    filter="url(#tinter)" xlink:href="http://www.crossfitwaxahachie.com/wp-content/uploads/2012/04/IMG_0752.jpg"/>
</svg>

Démo dynamique sur http://codepen.io/mullany/details/baLkH/

16
Michael Mullany

box-shadow: inset 0px 0px 64px 64px cornflowerblue, 0px 0px 4px 4px cornflowerblue;

Une teinte dans n'importe quelle couleur (plutôt que des filtres sépia ou de rotation qui ne sont pas pris en charge partout) pourrait être obtenue par une boîte-ombre insérée, dans la taille appropriée.

12
Frevd

Que diriez-vous alors d'une sous-couche?

HTML:

<span class="tint"><img src="..." /></span>

CSS:

.tint { background-color:red; display:inline-block; }
.tint img { opacity:0.8 }

Ajustez la couleur et l'opacité comme vous le souhaitez. Ne fonctionne pas vraiment sur les images avec transparence.

6
DanMan