Med CSS-maskering skapar du ett masklager att placera över ett element för att helt eller delvis dölja delar av elementet.
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.
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- |
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:
Här är en bild från Cinque Terre, i Italien:
Nu använder vi maskbilden (PNG-bilden ovan) som maskskikt för bilden från Cinque Terre, Italien:
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>
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).
Om vi utelämnar egenskapen mask-repeat
, kommer maskbilden att upprepas över hela bilden från Cinque Terre, Italien:
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>
Linjära och radiella CSS-gradienter kan också användas som maskbilder.
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):
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.
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>
Här använder vi en radiell gradient (formad som en cirkel) som maskskikt för vår bild:
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:
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>
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:
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>
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>
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>
Följande tabell listar alla CSS-maskeringsegenskaper:
Anger en bild som ska användas som ett masklager för ett element
Anger om maskskiktsbilden ska behandlas som en luminansmask eller som en alfamask
Anger ursprungspositionen (maskpositionsområdet) för ett masklager bild
Ställer in startpositionen för en masklagerbild (relativt masken positionsområde)
Anger hur maskskiktsbilden upprepas
Anger storleken på en masklagerbild