CSS-Maskierung – Die mask-image-Eigenschaft

Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

Mit der CSS-Maskierung erstellen Sie eine Maskenebene, die Sie über einer platzieren Element, um Teile des Elements teilweise oder vollständig auszublenden.

Die CSS-Eigenschaft mask-image

Die CSS-Eigenschaft mask-image gibt eine Maske an Schicht Bild.

Das Maskenebenenbild kann ein PNG-Bild, ein SVG-Bild, ein CSS-Verlauf oder ein sein SVG <mask>-Element.

Browser-Unterstützung

Hinweis: Die meisten Browser unterstützen CSS nur teilweise Maskierung. Sie müssen zusätzlich zum Standard das Präfix -webkit- verwenden Eigenschaft in den meisten Browsern.

Die Zahlen in der Tabelle unten geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt. Zahlen gefolgt von -webkit- geben die erste Version an, die mit einem Präfix funktionierte.

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

Verwenden Sie ein Bild als Maskenebene

Um ein PNG- oder SVG-Bild als Maskenebene zu verwenden, übergeben Sie die Maske mit einem url()-Wert Ebenenbild.

Das Maskenbild muss einen transparenten oder halbtransparenten Bereich haben. Schwarz bedeutet völlig transparent.

Hier ist das Maskenbild (ein PNG-Bild), das wir verwenden werden:

W3Schools.com

Hier ist ein Bild aus Cinque Terre in Italien:

Cinque Terre

Jetzt wenden wir das Maskenbild (das PNG-Bild oben) als Maskenebene für das Bild aus Cinque Terre, Italien an:

Cinque Terre

Beispiel

Hier ist der Quellcode:

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

Probieren Sie es selbst aus →

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

Beispiel erklärt

Die Eigenschaft mask-image gibt das Bild an als Maskenebene für ein Element verwendet werden.

Die Eigenschaft mask-repeat gibt an, ob und wie ein Maskenbild wird wiederholt. Der No-Repeat Der Wert gibt an, dass das Maskenbild nicht wiederholt wird (das Maskenbild wird wiederholt). nur einmal angezeigt).

Ein anderes Beispiel

Wenn wir die Eigenschaft mask-repeat weglassen, wird das Maskenbild im gesamten Bild von Cinque Terre, Italien, wiederholt:

Cinque Terre

Beispiel

Hier ist der Quellcode:

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

Probieren Sie es selbst aus →

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

Verwenden Sie Farbverläufe als Maskenebene

Als Maskenbilder können auch lineare und radiale CSS-Verläufe verwendet werden.

Beispiele für lineare Farbverläufe

Hier verwenden wir einen linearen Farbverlauf als Maskenebene für unser Bild. Dieser lineare Farbverlauf verläuft von oben (schwarz) nach unten (transparent):

Cinque Terre
 

Beispiel

Verwenden Sie einen linearen Farbverlauf als Maskenebene:

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

Probieren Sie es selbst aus →

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

Hier verwenden wir einen linearen Farbverlauf zusammen mit einer Textmaskierung als Maskenebene für unser 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.

Beispiel

Verwenden Sie einen linearen Farbverlauf zusammen mit der Textmaskierung als Maskenebene:

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

Probieren Sie es selbst aus →

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

Beispiele für radiale Gradienten

Hier verwenden wir einen radialen Farbverlauf (in Form eines Kreises) als Maskenebene für unser Bild:

Cinque Terre

Beispiel

Verwenden Sie einen radialen Farbverlauf als Maskenebene (einen Kreis):

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

Probieren Sie es selbst aus →

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

Hier verwenden wir einen radialen Farbverlauf (in Form einer Ellipse) als Maskenebene für unser Bild:

Cinque Terre

Beispiel

Verwenden Sie einen anderen radialen Farbverlauf als Maskenebene (eine Ellipse):

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

Probieren Sie es selbst aus →

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

Verwenden Sie SVG als Maskenebene

Das SVG-Element <mask> kann innerhalb eines verwendet werden SVG-Grafik zum Erstellen von Maskierungseffekten.

Hier verwenden wir das SVG-Element <mask>, um verschiedene Maskenebenen für unser Bild zu erstellen:

Sorry, your browser does not support inline SVG.

Beispiel

Eine SVG-Maskenebene (als Dreieck geformt):

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

Probieren Sie es selbst aus →

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

Beispiel

Eine SVG-Maskenebene (in Form eines Sterns):

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

Probieren Sie es selbst aus →

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

Beispiel

Eine SVG-Maskenebene (in Form von Kreisen):

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

Probieren Sie es selbst aus →

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

In der folgenden Tabelle sind alle CSS-Maskierungseigenschaften aufgeführt:

mask-image

Gibt ein Bild an, das als Maskenebene für ein Element verwendet werden soll

mask-mode

Gibt an, ob das Maskenebenenbild als Luminanzmaske oder behandelt wird als Alpha-Maske

mask-origin

Gibt die Ursprungsposition (den Maskenpositionsbereich) einer Maskenebene an Bild

mask-position

Legt die Startposition eines Maskenebenenbilds fest (relativ zur Maske). Positionsbereich)

mask-repeat

Gibt an, wie das Maskenebenenbild wiederholt wird

mask-size

Gibt die Größe eines Maskenebenenbilds an