2017-07-14 7 views
0

J'ai une image. J'ai un second élément graphique sur cette image, dont je veux utiliser l'alpha pour "cacher" des parties de l'image en dessous, alors que l'élément supérieur lui-même n'est pas affiché."destination-out" -comme un comportement de mélange en utilisant CSS?

Quelque chose le long des lignes de

CanvasRenderingContext2D.globalCompositeOperation = "destination-out" 

Cet élément supérieur changera la transparence et la forme en direct, préchargement donc tout sur une toile séparée ne sera pas une option. Je pensais à "multiplier", mais je n'ai pas fait ce que je m'attendais à. Je pensais que si je mettais l'alpha de la couche supérieure à "0", cela serait multiplié avec la couche ci-dessous, la rendant également transparente. (J'étais triste que cela n'a pas fonctionné)

Y a-t-il un moyen de "bidouiller" cela en utilisant les modes de fusion CSS existants (ou toute autre méthode)?

+0

Blend? Vous aimez le filtre: flou dans CSS 3? – Zydnar

+0

Comme ceci: https://en.wikipedia.org/wiki/Blend_modes – DavidsKanal

+0

Le moyen le plus simple est d'utiliser une superposition transparente. Opérations plus complexes que vous pouvez faire dans webgl même les navigateurs mobiles le supportent, pas tous, mais si la qualité compte ... Considérer si l'effet en vaut la chandelle. – Zydnar

Répondre

0

Comme alternative, pensez mask-image (toutefois, noter qu'actuellement il n'y a pas de soutien pour cela sur IE/bord):

img { 
 
    -webkit-mask-image: url(http://www.lordtennyson.ca/uploads/1/2/4/2/12421219/paw_print_small.png); 
 
    mask-image: url(http://www.lordtennyson.ca/uploads/1/2/4/2/12421219/paw_print_small.png); 
 
}
<img src="http://www.dizzydi.com/uploads/6/5/6/5/65656887/6168555.jpg" />