Maskování CSS - Vlastnost maska-obrázek

Obsah

    Zobrazit obsah

Pomocí maskování CSS vytvoříte vrstvu masky, kterou umístíte na prvek pro částečné nebo úplné skrytí částí prvku.

Vlastnost masky-obrázku CSS

Vlastnost CSS mask-image určuje masku vrstva obraz.

Obraz vrstvy masky může být obrázek PNG, obrázek SVG, přechod CSS nebo obrázek prvek SVG <mask>.

Podpora prohlížeče

Poznámka: Většina prohlížečů podporuje CSS pouze částečně maskování. Kromě standardu budete muset použít předponu -webkit- vlastnost ve většině prohlížečů.

Čí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 k předání masky hodnotu url() obraz vrstvy.

Obraz masky musí mít průhlednou nebo poloprůhlednou oblast. Černá označuje plně průhledný.

Zde je obrázek masky (obrázek PNG), který použijeme:

W3Schools.com

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

Cinque Terre

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

Cinque Terre

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; 
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;    
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>An image with a mask layer image:</h3>
<div class="mask1">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</div>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>

Příklad vysvětlen

Vlastnost mask-image určuje obrázek použít jako vrstvu masky pro prvek.

Vlastnost mask-repeat určuje zda a jak obraz masky se bude opakovat. žádné opakování hodnota označuje, že obraz masky se nebude opakovat (obrázek masky se bude opakovat zobrazí se pouze jednou).

Další příklad

Pokud vynecháme vlastnost mask-repeat, bude se obrázek masky opakovat na celém obrázku z Cinque Terre v Itálii:

Cinque Terre

Příklad

Zde je zdrojový kód:

 .mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: 
  url(w3logo.png);
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>An image with a mask layer image:</h3>
<div class="mask1">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</div>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>

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á):

Cinque Terre
 

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);
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
.mask1 {
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, transparent);
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>A linear gradient as a mask layer:</h3>
<div class="mask1">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</div>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>

Zde používáme lineární přechod spolu s maskováním textu jako vrstvu masky pro náš obrázek:

The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.

The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.

The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and 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);
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  font-size: 20px;
  padding: 20px;
  color: white;
}
.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);
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>A linear gradient as a mask layer:</h3>

<div class="mask1">
<p>The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>

<p>The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>

<p>The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>
</div>

</body>
</html>

Příklady radiálních gradientů

Zde používáme radiální přechod (ve tvaru kruhu) jako vrstvu masky pro náš obrázek:

Cinque Terre

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%);
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
.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%);
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>A radial gradient as a mask layer (a circle):</h3>
<div class="mask2">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</div>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>

Zde používáme radiální gradient (ve tvaru elipsy) jako vrstvu masky pro náš obrázek:

Cinque Terre

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) 50%);
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
.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) 50%);
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>A radial gradient as a mask layer (an ellipse):</h3>
<div class="mask3">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</div>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>

Použijte SVG jako maskovací vrstvu

Prvek SVG <mask> lze použít uvnitř souboru SVG grafika pro vytvoření maskovacích efektů.

Zde používáme prvek SVG <mask> 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>

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>An SVG mask layer (formed as a triangle):</h3>
<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>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>
Sorry, your browser does not support inline SVG.

Příklad

Vrstva masky SVG (ve tvaru hvězdy):

   <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>

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>An SVG mask layer (formed as a star):</h3>
<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>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>
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>

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>An SVG mask layer (formed as circles):</h3>
<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>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>

Vlastnosti maskování CSS

V následující tabulce jsou uvedeny všechny vlastnosti maskování CSS:

mask-image

Určuje obrázek, který se má použít jako vrstva masky pro prvek

mask-mode

Určuje, zda se s obrazem vrstvy masky zachází jako s maskou jasu nebo jako alfa maska

mask-origin

Určuje polohu počátku (oblast umístění masky) vrstvy masky obraz

mask-position

Nastaví počáteční pozici obrazu vrstvy masky (vzhledem k masce oblast polohy)

mask-repeat

Určuje, jak se obraz vrstvy masky opakuje

mask-size

Určuje velikost obrazu vrstvy masky