Maskowanie w CSS to jeden ze sposobów na ukrycie części elementu i pokazanie innych. Innym jest clip-path, ale nie koncentrujmy się dziś na tym. „Maski to obrazy; Klipy są ścieżkami ”to jeden ze sposobów myślenia o różnicy, chociaż z pewnością jest to zagmatwane.
W tym filmie przyjrzymy się, jak podobne maski ich mask-*właściwości są naprawdę podobne do właściwości backgroundi background-*. I można ich ładnie używać razem, ponieważ maska jest sposobem na ukrycie niektórych części obrazu, ale nadal ujawnia zawartość i tło innych części.
SVG doskonale nadaje się do masek, ponieważ natura wektorowa pozwala im ładnie skalować, a ogólnie mały rozmiar pliku jest przyjemny. Jednym z mylących elementów związanych z maskami jest plik mask-type. Te alphawartości oznaczają, że przezroczyste fragmenty obrazu stają się przezroczyste części maski (co jest czasami więcej umysłów niż nadzieję). luminanceŚrodki wartości bieli i czerni jest nieprzezroczysta jest przezroczysta i szary jest pomiędzy nimi. A może na odwrót? A co z maskami, które mają już kanał alfa? Czy obszary w pliku SVG, które nie zawierają żadnych elementów, są uważane za przezroczyste alfa? Prawdopodobnie? Zagrajmy.