CSS Masking - Egenskapen för maskbilden


Innehållsförteckning

    Visa innehållsförteckning


Med CSS-maskering skapar du ett masklager att placera över ett element för att helt eller delvis dölja delar av elementet.


CSS-maskbildsegenskapen

CSS-egenskapen mask-image anger en mask lager bild.

Masklagerbilden kan vara en PNG-bild, en SVG-bild, en CSS-gradient eller en SVG <mask>-element.


Webbläsarstöd

Obs! De flesta webbläsare har bara delvis stöd för CSS maskering. Du kommer att behöva använda prefixet -webkit- utöver standarden egendom i de flesta webbläsare.

Siffrorna i tabellen nedan anger den första webbläsarversionen som fullt ut stöder egenskapen. Siffror följt av -webkit- anger den första versionen som fungerade med ett prefix.

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

Använd en bild som maskskikt

Om du vill använda en PNG- eller SVG-bild som masklager använder du ett url()-värde för att skicka in masken lagerbild.

Maskbilden måste ha ett genomskinligt eller halvtransparent område. Svart indikerar helt transparent.

Här är maskbilden (en PNG-bild) vi kommer att använda:

W3Schools.com

Här är en bild från Cinque Terre, i Italien:

Cinque Terre

Nu använder vi maskbilden (PNG-bilden ovan) som maskskikt för bilden från Cinque Terre, Italien:

Cinque Terre

Exempel

Här är källkoden:

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

Prova själv →

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


Exempel förklarat

Egenskapen mask-image anger bilden att användas som ett masklager för ett element.

Egenskapen mask-repeat anger om eller hur en maskbild kommer att upprepas. no-repeat värde indikerar att maskbilden inte kommer att upprepas (maskbilden kommer endast visas en gång).

Ett annat exempel

Om vi utelämnar egenskapen mask-repeat, kommer maskbilden att upprepas över hela bilden från Cinque Terre, Italien:

Cinque Terre

Exempel

Här är källkoden:

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

Prova själv →

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




Använd Gradienter som maskskikt

Linjära och radiella CSS-gradienter kan också användas som maskbilder.

Exempel på linjär gradient

Här använder vi en linjär gradient som maskskikt för vår bild. Denna linjära gradient går från topp (svart) till botten (transparent):

Cinque Terre
 

Exempel

Använd en linjär gradient som ett masklager:

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

Prova själv →

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


Här använder vi en linjär gradient tillsammans med textmaskering som maskskikt för vår bild:

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.

Exempel

Använd en linjär gradient tillsammans med textmaskering som ett masklager:

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

Prova själv →

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


Exempel på radiell gradient

Här använder vi en radiell gradient (formad som en cirkel) som maskskikt för vår bild:

Cinque Terre

Exempel

Använd en radiell gradient som ett masklager (en cirkel):

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

Prova själv →

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


Här använder vi en radiell gradient (formad som en ellips) som maskskikt för vår bild:

Cinque Terre

Exempel

Använd en annan radiell gradient som ett masklager (en ellips):

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

Prova själv →

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



Använd SVG som maskskikt

SVG-elementet ><mask> kan användas inuti en SVG-grafik för att skapa maskeringseffekter.

Här använder vi SVG-elementet ><mask> för att skapa olika masklager för vår bild:

Sorry, your browser does not support inline SVG.

Exempel

Ett SVG-masklager (format som en triangel):

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

Prova själv →

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

Exempel

Ett SVG-masklager (format som en stjärna):

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

Prova själv →

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

Exempel

Ett SVG-masklager (format som cirklar):

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

Prova själv →

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

Följande tabell listar alla CSS-maskeringsegenskaper:

mask-image

Anger en bild som ska användas som ett masklager för ett element

mask-mode

Anger om maskskiktsbilden ska behandlas som en luminansmask eller som en alfamask

mask-origin

Anger ursprungspositionen (maskpositionsområdet) för ett masklager bild

mask-position

Ställer in startpositionen för en masklagerbild (relativt masken positionsområde)

mask-repeat

Anger hur maskskiktsbilden upprepas

mask-size

Anger storleken på en masklagerbild