Appliquer un masque à une image

• Utiliser un PNG transparent au dessus de l’image (méthode traditionnelle).
• Définir le border-radius à la moitié (50%) de la dimension de l’image de manière à faire un cercle.
• Utiliser les propriétés CSS3 mask et mask-clip (démo).
• Utiliser un canvas en tant que masque.
• Utiliser un SVG en tant que masque avec l’image comme background-pattern.
• Utiliser la propriété CSS3 clip-path.

Références

• https://stackoverflow.com/questions/8337570/best-way-to-mask-an-image-in-html5
• https://bennettfeely.com/clippy/