CSS maskování
Pomocí maskování CSS vytvoříte vrstvu masky, kterou umístíte přes prvek, abyste částečně nebo úplně skryli části prvku.
Vlastnost masky-obrázku CSS
Vlastnost CSS mask-image
určuje obrázek vrstvy masky.
Obraz vrstvy masky může být obrázek PNG, obrázek SVG, přechod CSS nebo prvek SVG <mask> .
Podpora prohlížeče
Poznámka: Většina prohlížečů podporuje maskování CSS pouze částečně. Ve většině prohlížečů budete muset kromě standardní vlastnosti použít předponu -webkit-.
Čísla v tabulce níže určují první verzi prohlížeče, která tuto vlastnost plně podporuje. Čísla následovaná -webkit- určují první verzi, která pracovala s předponou.
Property | |||||
---|---|---|---|---|---|
mask-image | 4.0 -webkit- | 79.0 -webkit- | 53.0 | 4.0 -webkit- | 15.0 -webkit- |
Použijte obrázek jako maskovací vrstvu
Chcete-li jako vrstvu masky použít obrázek PNG nebo SVG, použijte hodnotu url() k předání obrázku vrstvy masky.
Obraz masky musí mít průhlednou nebo poloprůhlednou oblast. Černá barva označuje plně průhlednou.
Zde je obrázek masky (obrázek PNG), který použijeme:
Zde je obrázek z Cinque Terre v Itálii:
Nyní použijeme obrázek masky (obrázek PNG výše) jako vrstvu masky pro obrázek z Cinque Terre, Itálie:
Příklad
Zde je zdrojový kód:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image:
url(w3logo.png);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
Příklad vysvětlen
Vlastnost mask-image
určuje obrázek, který se má použít jako vrstva masky pro prvek.
Vlastnost mask-repeat
určuje, zda nebo jak se bude obraz masky opakovat. Hodnota no-repeat
udává, že obraz masky se nebude opakovat (obrázek masky se zobrazí pouze jednou).
Další příklad
Pokud vlastnost vynecháme mask-repeat
, obrázek masky se bude opakovat po celém obrázku z Cinque Terre, Itálie:
Příklad
Zde je zdrojový kód:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image:
url(w3logo.png);
}
Použijte přechody jako maskovací vrstvu
Lineární a radiální přechody CSS lze také použít jako obrázky masky.
Příklady lineárního gradientu
Zde používáme lineární gradient jako vrstvu masky pro náš obrázek. Tento lineární gradient jde shora (černá) dolů (průhledná):
Příklad
Použijte lineární přechod jako vrstvu masky:
.mask1 {
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black,
transparent);
}
Zde používáme lineární přechod spolu s maskováním textu jako vrstvu masky pro náš obrázek:
Cinque Terre je pobřežní oblast v Ligurii na severozápadě Itálie. Leží na západě provincie La Spezia a zahrnuje pět vesnic: Monterosso al Mare, Vernazza, Corniglia, Manarola a Riomaggiore.
Cinque Terre je pobřežní oblast v Ligurii na severozápadě Itálie. Leží na západě provincie La Spezia a zahrnuje pět vesnic: Monterosso al Mare, Vernazza, Corniglia, Manarola a Riomaggiore.
Cinque Terre je pobřežní oblast v Ligurii na severozápadě Itálie. Leží na západě provincie La Spezia a zahrnuje pět vesnic: Monterosso al Mare, Vernazza, Corniglia, Manarola a Riomaggiore.
Příklad
Použijte lineární přechod spolu s maskováním textu jako vrstvu masky:
.mask1 {
max-width: 600px;
height: 350px;
overflow-y: scroll;
background: url(img_5terre.jpg) no-repeat;
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient (black, transparent);
}
Příklady radiálních gradientů
Zde používáme radiální přechod (ve tvaru kruhu) jako vrstvu masky pro náš obrázek:
Příklad
Použijte radiální přechod jako vrstvu masky (kruh):
.mask2 {
-webkit-mask-image:
radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
Zde používáme radiální gradient (ve tvaru elipsy) jako vrstvu masky pro náš obrázek:
Příklad
Použijte jiný radiální přechod jako vrstvu masky (elipsu):
.mask3 {
-webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0,
0, 0, 0.5) 50%);
mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0,
0, 0.5));
}
Použijte SVG jako maskovací vrstvu
Prvek SVG <mask>
lze použít uvnitř grafiky SVG k vytvoření maskovacích efektů.
Zde používáme <mask>
prvek SVG k vytvoření různých vrstev masky pro náš obrázek:
Příklad
Vrstva masky SVG (ve tvaru trojúhelníku):
<svg width="600" height="400">
<mask id="svgmask1">
<polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
Příklad
Vrstva masky SVG (vytvořená jako hvězda):
<svg width="600" height="400">
<mask id="svgmask2">
<polygon fill="#ffffff" points="100,10 40,198 190,78 10,78
160,198"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="img_5terre.jpg" mask="url(#svgmask2)"></image>
</svg>
Příklad
Vrstva masky SVG (ve formě kruhů):
<svg width="600" height="400">
<mask
id="svgmask3">
<circle fill="#ffffff" cx="75" cy="75"
r="75"></circle>
<circle fill="#ffffff" cx="80"
cy="260" r="75"></circle>
<circle fill="#ffffff"
cx="270" cy="160" r="75"></circle>
</mask>
<image
xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg"
mask="url(#svgmask3)"></image>
</svg>
Vlastnosti maskování CSS
V následující tabulce jsou uvedeny všechny vlastnosti maskování CSS:
Property | Description |
---|---|
mask-image | Specifies an image to be used as a mask layer for an element |
mask-mode | Specifies whether the mask layer image is treated as a luminance mask or as an alpha mask |
mask-origin | Specifies the origin position (the mask position area) of a mask layer image |
mask-position | Sets the starting position of a mask layer image (relative to the mask position area) |
mask-repeat | Specifies how the mask layer image is repeated |
mask-size | Specifies the size of a mask layer image |