CSS Masking - Η ιδιότητα της μάσκας-εικόνας

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

Με τη μάσκα CSS δημιουργείτε ένα στρώμα μάσκας για να το τοποθετήσετε πάνω από ένα στοιχείο για μερική ή πλήρη απόκρυψη τμημάτων του στοιχείου.

Η ιδιότητα μάσκας-εικόνας CSS

Η ιδιότητα CSS mask-image καθορίζει μια μάσκα στρώμα εικόνα.

Η εικόνα του επιπέδου μάσκας μπορεί να είναι μια εικόνα PNG, μια εικόνα SVG, μια διαβάθμιση CSS ή μια εικόνα Στοιχείο <μάσκα> SVG.

Υποστήριξη προγράμματος περιήγησης

Σημείωση: Τα περισσότερα προγράμματα περιήγησης έχουν μόνο μερική υποστήριξη για CSS συγκάλυψη. Θα χρειαστεί να χρησιμοποιήσετε το πρόθεμα -webkit- εκτός από το τυπικό ιδιοκτησία στα περισσότερα προγράμματα περιήγησης.

Οι αριθμοί στον παρακάτω πίνακα προσδιορίζουν την πρώτη έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως την ιδιότητα. Οι αριθμοί ακολουθούμενοι από -webkit- καθορίζουν την πρώτη έκδοση που λειτουργούσε με πρόθεμα.

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

Χρησιμοποιήστε μια εικόνα ως στρώμα μάσκας

Για να χρησιμοποιήσετε μια εικόνα PNG ή SVG ως επίπεδο μάσκας, χρησιμοποιήστε μια τιμή url() για να μεταβιβάσετε στη μάσκα εικόνα στρώματος.

Η εικόνα της μάσκας πρέπει να έχει μια διαφανή ή ημιδιαφανή περιοχή. Μαύρος δείχνει πλήρως διαφανές.

Εδώ είναι η εικόνα μάσκας (εικόνα PNG) που θα χρησιμοποιήσουμε:

W3Schools.com

Εδώ είναι μια εικόνα από το Cinque Terre, στην Ιταλία:

Cinque Terre

Τώρα, εφαρμόζουμε την εικόνα μάσκας (την εικόνα PNG παραπάνω) ως στρώμα μάσκας για την εικόνα από το Cinque Terre, Ιταλία:

Cinque Terre

Παράδειγμα

Εδώ είναι ο πηγαίος κώδικας:

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

Δοκιμάστε το μόνοι σας →

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

Παράδειγμα Επεξήγηση

Η ιδιότητα mask-image καθορίζει την εικόνα να χρησιμοποιηθεί ως στρώμα μάσκας για ένα στοιχείο.

Η ιδιότητα mask-repeat καθορίζει εάν και πώς θα επαναληφθεί μια εικόνα μάσκας. Το μη επανάληψη Η τιμή υποδεικνύει ότι η εικόνα μάσκας δεν θα επαναληφθεί (η εικόνα μάσκας θα επαναληφθεί εμφανίζεται μόνο μία φορά).

Ενα άλλο παράδειγμα

Εάν παραλείψουμε την ιδιότητα mask-repeat, η εικόνα της μάσκας θα επαναληφθεί σε όλη την εικόνα από το Cinque Terre, Ιταλία:

Cinque Terre

Παράδειγμα

Εδώ είναι ο πηγαίος κώδικας:

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

Δοκιμάστε το μόνοι σας →

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

Χρησιμοποιήστε τις διαβαθμίσεις ως στρώμα μάσκας

Οι γραμμικές και ακτινικές διαβαθμίσεις CSS μπορούν επίσης να χρησιμοποιηθούν ως εικόνες μάσκας.

Παραδείγματα γραμμικής κλίσης

Εδώ, χρησιμοποιούμε μια γραμμική διαβάθμιση ως στρώμα μάσκας για την εικόνα μας. Αυτή η γραμμική κλίση πηγαίνει από πάνω (μαύρο) προς τα κάτω (διαφανές):

Cinque Terre
 

Παράδειγμα

Χρησιμοποιήστε μια γραμμική κλίση ως στρώμα μάσκας:

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

Δοκιμάστε το μόνοι σας →

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

Εδώ, χρησιμοποιούμε μια γραμμική διαβάθμιση μαζί με κάλυψη κειμένου ως στρώμα μάσκας για την εικόνα μας:

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.

Παράδειγμα

Χρησιμοποιήστε μια γραμμική κλίση μαζί με τη κάλυψη κειμένου ως στρώμα μάσκας:

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

Δοκιμάστε το μόνοι σας →

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

Παραδείγματα Radial Gradient

Εδώ, χρησιμοποιούμε μια ακτινική διαβάθμιση (με σχήμα κύκλου) ως στρώμα μάσκας για την εικόνα μας:

Cinque Terre

Παράδειγμα

Χρησιμοποιήστε μια ακτινωτή κλίση ως στρώμα μάσκας (κύκλος):

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

Δοκιμάστε το μόνοι σας →

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

Εδώ, χρησιμοποιούμε μια ακτινική κλίση (σε σχήμα έλλειψης) ως στρώμα μάσκας για την εικόνα μας:

Cinque Terre

Παράδειγμα

Χρησιμοποιήστε μια άλλη ακτινική κλίση ως στρώμα μάσκας (μια έλλειψη):

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

Δοκιμάστε το μόνοι σας →

<!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 ως στρώμα μάσκας

Το στοιχείο SVG <mask> μπορεί να χρησιμοποιηθεί μέσα σε Γραφικό SVG για δημιουργία εφέ κάλυψης.

Εδώ, χρησιμοποιούμε το στοιχείο SVG <mask> για να δημιουργήσουμε διαφορετικά επίπεδα μάσκας για την εικόνα μας:

Sorry, your browser does not support inline SVG.

Παράδειγμα

Ένα στρώμα μάσκας SVG (σχηματισμένο ως τρίγωνο):

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

Δοκιμάστε το μόνοι σας →

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

Παράδειγμα

Ένα στρώμα μάσκας SVG (σχηματισμένο ως αστέρι):

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

Δοκιμάστε το μόνοι σας →

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

Παράδειγμα

Ένα στρώμα μάσκας SVG (σχηματισμένο ως κύκλοι):

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

Δοκιμάστε το μόνοι σας →

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

Ο παρακάτω πίνακας παραθέτει όλες τις ιδιότητες κάλυψης CSS:

mask-image

Καθορίζει μια εικόνα που θα χρησιμοποιηθεί ως στρώμα μάσκας για ένα στοιχείο

mask-mode

Καθορίζει εάν η εικόνα του στρώματος μάσκας αντιμετωπίζεται ως μάσκα φωτεινότητας ή ως μάσκα άλφα

mask-origin

Καθορίζει τη θέση προέλευσης (την περιοχή θέσης μάσκας) ενός στρώματος μάσκας εικόνα

mask-position

Ορίζει την αρχική θέση μιας εικόνας στρώματος μάσκας (σε σχέση με τη μάσκα περιοχή θέσης)

mask-repeat

Καθορίζει πώς επαναλαμβάνεται η εικόνα του επιπέδου μάσκας

mask-size

Καθορίζει το μέγεθος μιας εικόνας στρώματος μάσκας