Das Maskieren in CSS ist eine Möglichkeit, Teile des Elements auszublenden und andere anzuzeigen. Eine andere ist clip-path, aber konzentrieren wir uns heute nicht darauf. „Masken sind Bilder; Clips sind Pfade “ist eine Möglichkeit, über den Unterschied nachzudenken, obwohl es sicherlich verwirrend wird.
In diesem Video sehen wir uns an , wie ähnlich maskund seine mask-*Eigenschaften sind wirklich ähnlich wie die backgroundund background-*Eigenschaften. Und sie können gut zusammen verwendet werden, da eine Maske eine Möglichkeit ist, einige Teile eines Bildes zu verbergen, aber dennoch den Inhalt und den Hintergrund der anderen Teile zu enthüllen.
SVG eignet sich hervorragend für Masken, da sie aufgrund der Vektornatur gut skaliert werden können und die im Allgemeinen kleine Dateigröße gut ist. Eines der verwirrenden Dinge bei Masken ist das mask-type. Der alphaWert bedeutet, dass die transparenten Teile des Bildes zu den transparenten Teilen der Maske werden (was manchmal nervenaufreibender ist, als Sie hoffen). Ein luminanceWert bedeutet, dass Weiß undurchsichtig und Schwarz transparent ist und Grau dazwischen liegt. Oder ist es umgekehrt? Und was ist mit Masken, die bereits einen Alphakanal haben? Und werden die Bereiche in einer SVG-Datei, in denen sich nichts befindet, als alpha-transparent angesehen? Wahrscheinlich? Lass uns spielen.