103 of 313 menu

Ιδιότητα mask

Η ιδιότητα mask είναι μια συντομογραφία για όλες τις ιδιότητες απομάσκαρσης και επιτρέπει τον ορισμό: εικόνας-μάσκας, της θέσης της, του μεγέθους, της λειτουργίας επικάλυψης και άλλων παραμέτρων.

Είναι μια συνοπτική ιδιότητα για τις ακόλουθες ιδιότητες: mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite.

Σύνταξη

επιλογέας {
	mask: [mask-image] [mask-position] / [mask-size]
	      [mask-repeat] [mask-origin] [mask-clip]
	      [mask-mode] [mask-composite];
}

Τιμές

Τιμή	Περιγραφή
`none`	Απενεργοποιεί την απομάσκαρση (προεπιλεγμένη τιμή)
`url()`	Διαδρομή προς την εικόνα-μάσκα (SVG, PNG)
`linear-gradient()`	Γραμμική διαβάθμιση ως μάσκα
`radial-gradient()`	Ακτινωτή διαβάθμιση ως μάσκα
`position`	Θέση της μάσκας (top, center, 50% 50% κ.λπ.)
`size`	Μέγεθος της μάσκας (cover, contain, 100px 50px)
`repeat`	Επανάληψη της μάσκας (no-repeat, repeat-x, space)
`mode`	Λειτουργία επικάλυψης (alpha, luminance, match-source)
`composite`	Σύνθεση μασκών (add, subtract, intersect, exclude)

Προετοιμασία εικόνων

Ας υποθέσουμε ότι έχουμε μια εικόνα φύσης την οποία θα περικόψουμε, και εικόνες SVG μιας καρδιάς και ενός βέλους, από τις οποίες θα κόψουμε:

<img src="image.jpg" width="500">
<br>
<img src="heart.svg" width="300">
<br>
<img src="arrow.svg" width="300">

:

Παράδειγμα . Εικόνα-μάσκα

Ας εφαρμόσουμε μια μάσκα-καρδιά στην εικόνα μας:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	background: red;
	mask: url("heart.svg") center/300px no-repeat;
}

:

Παράδειγμα . Θέση μάσκας

Μάσκα-καρδιά στην επάνω αριστερή γωνία:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") left top/150px no-repeat;
}

:

Παράδειγμα . Θέση μάσκας

Μάσκα-καρδιά στην κάτω δεξιά γωνία:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") right bottom/150px no-repeat;
}

:

Παράδειγμα . Θέση μάσκας

Μάσκα-καρδιά στο κέντρο αριστερά:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") left center/150px no-repeat;
}

:

Παράδειγμα . Θέση μάσκας

Μάσκα-καρδιά στο κέντρο:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/150px no-repeat;
}

:

Παράδειγμα . Θέση μάσκας

Μάσκα-καρδιά 100px από αριστερά και 200px από πάνω:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") 100px 200px /150px no-repeat;
}

:

Παράδειγμα . Μέγεθος μάσκας cover

Η τιμή cover κλιμακώνει τη μάσκα για να καλύψει πλήρως το στοιχείο, διατηρώντας τις αναλογίες. Μπορεί να κόψει τις άκρες της μάσκας εάν οι αναλογίες δεν ταιριάζουν:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/cover;
}

:

Παράδειγμα . Μέγεθος μάσκας contain

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

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/contain no-repeat;
}

:

Παράδειγμα . Μέγεθος μάσκας

Το σταθερό μέγεθος ορίζει τα ακριβή διαστάσεις της μάσκας. Για παράδειγμα, ας φτιάξουμε μια μάσκα μεγέθους 50px:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/50px no-repeat;
}

:

Παράδειγμα . Επανάληψη no-repeat

Η τιμή no-repeat απενεργοποιεί την επανάληψη της μάσκας. Η μάσκα εμφανίζεται μόνο μία φορά στην καθορισμένη θέση:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") top left / 150px no-repeat;
}

:

Παράδειγμα . Επανάληψη repeat-x

Η τιμή repeat-x επαναλαμβάνει τη μάσκα μόνο στον οριζόντιο άξονα:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") left center / 50px repeat-x;
}

:

Παράδειγμα . Σύνθεση add

Η τιμή add προσθέτει πολλαπλές μάσκες (αποτέλεσμα - ένωση όλων των μασκών):

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 150px no-repeat,
		url("arrow.svg") 200px 30px / 150px no-repeat;
	mask-composite: add;
}

:

Παράδειγμα . Σύνθεση intersect

Η τιμή intersect εμφανίζει μόνο την περιοχή τομής των μασκών:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 150px no-repeat,
		url("arrow.svg") 50px 30px / 150px no-repeat;
	mask-composite: intersect;
}

:

Παράδειγμα . Σύνθεση exclude

Η τιμή exclude εμφανίζει τις περιοχές των μασκών που δεν τέμνονται:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 150px no-repeat,
		url("arrow.svg") 50px 30px / 150px no-repeat;
	mask-composite: exclude;
}

:

Παράδειγμα . Σύνθεση subtract

Η τιμή subtract αφαιρεί τη δεύτερη μάσκα από την πρώτη. Για παράδειγμα, ας φτιάξουμε μια καρδιά και ας αφαιρέσουμε από αυτή το βέλος:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 250px no-repeat,
		url("arrow.svg") 170px 80px / 120px no-repeat;
		
		
	mask-composite: subtract;
}

:

Παράδειγμα . Αναλυτική σύνταξη mask

Η ιδιότητα mask, γραμμένη ως ξεχωριστές συνιστώσες:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask-image: url("heart.svg");
	mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-origin: content-box;
	mask-clip: content-box;
	mask-mode: alpha;
	mask-composite: add;
}

:

Παράδειγμα . SVG για εικόνα

Χρήση στοιχείου SVG ως μάσκας για εικόνα:

<img id="image" src="image.jpg">
<svg width="0" height="0">
	<mask id="mask">
		<path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
	</mask>
</svg>

#image {
	width: 500px;
	height: 281px;
	background: red;
	mask: url(#mask);
}

:

Παράδειγμα . SVG για διαβάθμιση

Χρήση στοιχείου SVG ως μάσκας για διαβάθμιση:

<div id="elem"></div>
<svg width="0" height="0">
	<mask id="star-mask">
		<path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
	</mask>
</svg>

#elem {
	width: 500px;
	height: 300px;
	background: linear-gradient(45deg, red, blue);
	mask: url(#star-mask);
}

:

Δείτε επίσης

ιδιότητα mask-position,
ορίζει τη θέση της μάσκας σε σχέση με το στοιχείο
ιδιότητα mask-image,
ορίζει την εικόνα για τη μάσκα
ιδιότητα mask-mode,
ορίζει πώς η μάσκα αλληλεπιδρά με το φόντο
ιδιότητα mask-size,
ορίζει το μέγεθος της μάσκας
ιδιότητα mask-repeat,
ορίζει την επανάληψη της μάσκας
ιδιότητα mask-origin,
ορίζει την περιοχή τοποθέτησης της μάσκας
ιδιότητα mask-clip,
ορίζει την περιοχή αποκοπής της μάσκας
ιδιότητα mask-composite,
ορίζει πώς συνδυάζονται πολλαπλές μάσκες

↑

Ελληνικά▼

Afrikaans Azərbaycan Български বাংলা Беларуская Čeština Dansk Deutsch English Español Eesti Suomi Français हिन्दी Magyar Հայերեն Indonesia Italiano 日本語 ქართული Қазақ 한국어 Кыргызча Lietuvių Latviešu Македонски Melayu မြန်မာ Nederlands Norsk Polski Português Română Русский සිංහල Slovenčina Slovenščina Shqip Српски Srpski Svenska Kiswahili Тоҷикӣ ไทย Türkmen Türkçe Ўзбек Oʻzbek Tiếng Việt

Χρησιμοποιούμε cookie για τη λειτουργία του ιστότοπου, την ανάλυση και την εξατομίκευση. Η επεξεργασία των δεδομένων γίνεται σύμφωνα με την Πολιτική Απορρήτου.

αποδοχή όλων ρύθμιση απόρριψη