CSS tutoriál

DOMŮ CSS Úvod do CSS Syntaxe CSS Selektory CSS CSS Jak na to Komentáře CSS CSS barvy CSS pozadí Hranice CSS Okraje CSS CSS padding Výška/šířka CSS CSS Box Model obrys CSS Text CSS CSS písma Ikony CSS CSS odkazy CSS seznamy CSS tabulky Zobrazení CSS CSS Max-šířka Pozice CSS CSS Z-index Přetečení CSS CSS Float CSS Inline-block CSS zarovnat CSS kombinátory Pseudotřída CSS Pseudoprvek CSS Neprůhlednost CSS Navigační lišta CSS Rozbalovací seznamy CSS Galerie obrázků CSS CSS obrázkoví skřítci CSS Attr Selectory CSS formuláře Počítadla CSS Rozvržení webu CSS Jednotky CSS Specifičnost CSS CSS !důležité Matematické funkce CSS

Pokročilé CSS

CSS zaoblené rohy Obrázky ohraničení CSS CSS pozadí CSS barvy Klíčová slova barev CSS Přechody CSS CSS Shadows Textové efekty CSS Webová písma CSS CSS 2D transformace CSS 3D transformace Přechody CSS CSS animace CSS Tooltips Obrázky ve stylu CSS CSS obrazový odraz Přizpůsobení objektu CSS CSS objekt-pozice CSS maskování Tlačítka CSS Stránkování CSS Více sloupců CSS Uživatelské rozhraní CSS CSS proměnné Velikost CSS boxu CSS mediální dotazy Příklady CSS MQ CSS Flexbox

CSS responzivní

Úvod RWD Výhled RWD Zobrazení mřížky RWD Dotazy na média RWD Obrázky RWD Videa RWD Rámce RWD Šablony RWD

CSS mřížka

Úvod do mřížky Mřížkový kontejner Položka mřížky

CSS SASS

Výukový program SASS

Příklady CSS

CSS šablony Příklady CSS css kvíz Cvičení CSS CSS certifikát

CSS reference

Reference CSS Selektory CSS Funkce CSS CSS Reference Aural Webová bezpečná písma CSS CSS animovatelné Jednotky CSS Převodník CSS PX-EM CSS barvy Hodnoty barev CSS Výchozí hodnoty CSS Podpora prohlížeče CSS

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-imageurč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:

W3Schools.com

Zde je obrázek z Cinque Terre v Itálii:

Pět zemí

Nyní použijeme obrázek masky (obrázek PNG výše) jako vrstvu masky pro obrázek z Cinque Terre, Itálie:

Pět zemí

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-imageurčuje obrázek, který se má použít jako vrstva masky pro prvek.

Vlastnost mask-repeaturč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ět zemí

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ět zemí
 

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ět zemí

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ět zemí

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:

Sorry, your browser does not support inline SVG.

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>
Sorry, your browser does not support inline 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>
Sorry, your browser does not support inline 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