Die beste Methode, um ein Bild in HTML5 zu maskieren

könnten Sie

• die altmodische Art - indem Sie ein transparentes png über dem gewünschten Element verwenden
• das css3 border-radius des Bildes wird auf die Hälfte seiner Abmessungen gesetzt (so dass der Rahmen einen Kreis definiert)
• die Eigenschaften css3 mask und mask-clip (hier ist eine nette Demo: Ссылка )
• Leinwand, um die Maskierung zu machen
• svg kreise mit dem Bild als Hintergrundmuster

Die Wahl hängt von den Zielbrowsern und der Zeit ab, die Sie investieren möchten.
Für ein vollständig browserübergreifendes Ergebnis empfehle ich die altmodische Methode , aber wenn Sie mehr Formen (vielleicht dynamische) oder mehr als nur Bildmaskierung möchten, könnten Sie Svg oder Canvas versuchen.

Siehe dies

Überprüfen Sie dies Ссылка

BEARBEITEN

Sie können auch Ссылка ausprobieren, wie von Albert vorgeschlagen

Hier ist die Methode, die am besten für mich funktioniert:

1. Erstellen Sie ein SVG mit der gewünschten Maskenform.
2. Bearbeiten Sie die CSS des entsprechenden Elements und geben Sie die URL des SVG für die Maske
an

Bei einem 200px-Kreis könnte Ihr SVG wie folgt aussehen:

Und Ihr CSS könnte so aussehen:

Und wenn Sie etwas tiefer gehen wollen, finde ich diesen Leitfaden sehr hilfreich: Ссылка .