CSS-maszkolás – A maszk-kép tulajdonság

Tartalomjegyzék

    Tartalomjegyzék megjelenítése

A CSS-maszkolás segítségével egy maszkréteget hoz létre, amelyet egy fölé helyezhet elemet, hogy részben vagy teljesen elrejtse az elem egyes részeit.

A CSS-maszk-kép tulajdonság

A CSS mask-image tulajdonsága maszkot határoz meg réteg kép.

A maszkréteg képe lehet PNG kép, SVG kép, CSS gradiens vagy egy SVG elem.

Böngésző támogatás

Megjegyzés: A legtöbb böngésző csak részben támogatja a CSS-t maszkolás. A szabvány mellett a -webkit- előtagot is kell használnia tulajdonság a legtöbb böngészőben.

Az alábbi táblázatban szereplő számok az első böngészőverziót jelzik, amely teljes mértékben támogatja a tulajdonságot. A számok, amelyeket a -webkit- követ, az első olyan verziót adják meg, amely előtaggal működött.

Property
mask-image 4.0 -webkit- 79.0 -webkit- 53.0 4.0 -webkit- 15.0 -webkit-

Használjon képet maszkrétegként

Ha PNG vagy SVG képet szeretne maszkrétegként használni, használja az url() értéket a maszk átadásához réteg kép.

A maszk képének átlátszó vagy félig átlátszó területnek kell lennie. Fekete teljesen átlátszót jelez.

Íme a maszkkép (egy PNG-kép), amelyet használni fogunk:

W3Schools.com

Íme egy kép az olaszországi Cinque Terre-ről:

Cinque Terre

Most a maszkképet (a fenti PNG-képet) alkalmazzuk maszkrétegként az olaszországi Cinque Terre-ből származó képhez:

Cinque Terre

Példa

Íme a forráskód:

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

Próbálja ki Ön is →

<!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élda Magyarázva

A mask-image tulajdonság határozza meg a képet egy elem maszkrétegeként használható.

A mask-repeat tulajdonság határozza meg, hogy kell-e, és hogyan egy maszkkép megismétlődik. A no-repeat Az érték azt jelzi, hogy a maszkkép nem ismétlődik (a maszkkép megismétlődik csak egyszer jelenik meg).

Egy másik példa

Ha kihagyjuk a mask-repeat tulajdonságot, a maszk képe megismétlődik az olaszországi Cinque Terre képében:

Cinque Terre

Példa

Íme a forráskód:

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

Próbálja ki Ön is →

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

Használja a színátmeneteket maszkrétegként

A CSS lineáris és radiális színátmenetei maszkképként is használhatók.

Lineáris gradiens példák

Itt lineáris színátmenetet használunk képünk maszkrétegeként. Ez a lineáris gradiens felülről (fekete) lefelé halad (átlátszó):

Cinque Terre
 

Példa

Használjon lineáris színátmenetet maszkrétegként:

   .mask1 {
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, 
    transparent);
}

Próbálja ki Ön is →

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

Itt lineáris színátmenetet és szövegmaszkolást használunk képünk maszkrétegeként:

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

Használjon lineáris színátmenetet a szövegmaszkolás mellett maszkrétegként:

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

Próbálja ki Ön is →

<!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éldák radiális gradiensre

Itt egy radiális gradienst (kör alakú) használunk képünk maszkrétegeként:

Cinque Terre

Példa

Használjon radiális gradienst maszkrétegként (kör):

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

Próbálja ki Ön is →

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

Itt egy radiális gradienst (ellipszis alakú) használunk képünk maszkrétegeként:

Cinque Terre

Példa

Használjon másik radiális gradienst maszkrétegként (ellipszisként):

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

Próbálja ki Ön is →

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

Használja az SVG-t maszkrétegként

Az SVG <mask> eleme használható egy SVG grafika maszkolási effektusok létrehozásához.

Itt az SVG <mask> elemét használjuk, hogy különböző maszkrétegeket hozzunk létre a képünkhöz:

Sorry, your browser does not support inline SVG.

Példa

Egy SVG maszkréteg (háromszög formájában):

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

Próbálja ki Ön is →

<!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élda

Egy SVG maszkréteg (csillag formájában):

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

Próbálja ki Ön is →

<!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élda

Egy SVG maszkréteg (körök formájában):

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

Próbálja ki Ön is →

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

CSS maszkolási tulajdonságok

Az alábbi táblázat felsorolja az összes CSS-maszkolási tulajdonságot:

mask-image

Megadja az elem maszkrétegeként használandó képet

mask-mode

Meghatározza, hogy a maszkréteg képét fénysűrűségmaszkként kezelje-e vagy alfa maszkként

mask-origin

Megadja a maszkréteg eredeti pozícióját (a maszk pozícióterületét). kép

mask-position

Beállítja a maszkréteg képének kezdőpozícióját (a maszkhoz viszonyítva pozíció terület)

mask-repeat

Meghatározza, hogyan ismétlődik a maszkréteg kép

mask-size

Meghatározza a maszkréteg képének méretét