Masker-afbeelding - CSS-trucs

Een maskin CSS verbergt een deel van het element waarop wordt toegepast.

.el ( mask-image: url(star.svg); )

Stel dat u een element had met een fotografische achtergrond en een zwart-wit SVG-afbeelding om als masker te gebruiken, zoals dit:

U kunt de afbeelding instellen als een background-imageen het masker als een mask-imageop hetzelfde element, en zoiets als dit krijgen:

Maskers hebben veel gemeen met achtergronden, omdat u ze op maat kunt maken, positioneren en herhalen en dergelijke, net als achtergronden. Zie de gerelateerde eigenschappen hieronder. Maar hier is nog iets interessants over maskers die ze delen met achtergronden: het kunnen verlopen zijn.

Hier is dezelfde achtergrondafbeelding, alleen met een linear-gradientmasker erop, waardoor de bovenkant transparant vervaagt en de onderkant helemaal niet transparant is:

Dat werkt omdat de bovenkant van de linear-gradientis transparent. Ik zou hebben aangenomen dat het zou werken als het whitezo lang was als het mask-typewas luminance, maar dat lijkt voor mij in geen enkele browser te werken.

Over luminancemaskers gesproken, dat lijkt niet te werken voor afbeeldingen-als-maskers die voor mij een rasterindeling zijn zoals JPG.webp of PNG. Update : lezer Micheal Hall schrijft in met een demo waarin het misschien iets te maken heeft met het gebruik van de lange-hand-eigenschappen. Firefox lijkt dit concept te ondersteunen als u alleen de afkorting gebruikt.

Maar alfamaskers lijken prima te werken. Zoals in rasterafbeeldingen die werkelijke alfatransparantie gebruiken. Zoals dit:

En om een punt te bewijzen, een kleurenanimatie die je door het masker kunt zien:

De mask-imageeigenschap kan ook rechtstreeks binnen SVG-elementen worden gebruikt. Kijk maar eens naar dit elliptische masker dat ook een vervaagd filter heeft:

Het ziet er een beetje naar uit dat je dat SVG-masker zou kunnen vasthouden en het op andere elementen kunt toepassen, mask-image: url(#mask);maar ik vind niet dat dat echt werkt. Het werkt alleen binnen SVG en heeft een vervelende bijwerking dat een afbeelding volledig wordt gewist als deze buiten de SVG wordt gebruikt.

Browser-ondersteuning

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.