# 185: Παίζοντας με μάσκες CSS - CSS-Κόλπα

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

Η απόκρυψη στο CSS είναι ένας τρόπος για να κρύψετε τμήματα του στοιχείου και να δείξετε σε άλλους. Ένα άλλο είναι clip-path, αλλά ας μην επικεντρωθούμε σε αυτό σήμερα. «Οι μάσκες είναι εικόνες. Τα κλιπ είναι μονοπάτια »είναι ένας τρόπος να σκεφτούμε τη διαφορά, αν και σίγουρα γίνεται σύγχυση.

Σε αυτό το βίντεο, θα δούμε πόσο παρόμοια maskκαι οι mask-*ιδιότητές του είναι πραγματικά παρόμοιες με τις ιδιότητες backgroundκαι background-*. Και μπορούν να χρησιμοποιηθούν μαζί όμορφα, γιατί η μάσκα είναι ένας τρόπος απόκρυψης ορισμένων τμημάτων μιας εικόνας, αλλά εξακολουθεί να αποκαλύπτεται το περιεχόμενο και το υπόβαθρο των άλλων τμημάτων.

Το SVG είναι ιδανικό για μάσκες, καθώς η φύση του φορέα τους επιτρέπει να κλιμακώνονται όμορφα και το γενικά μικρό μέγεθος αρχείου είναι ωραίο. Ένα από τα μπερδεμένα κομμάτια γύρω από τις μάσκες είναι το mask-type. Η alphaτιμή σημαίνει ότι τα διαφανή μέρη της εικόνας γίνονται τα διαφανή μέρη της μάσκας (η οποία μερικές φορές είναι πιο μυαλό από ό, τι ελπίζετε). Μια luminanceτιμή σημαίνει ότι το λευκό είναι αδιαφανές και το μαύρο είναι διαφανές και το γκρι είναι ενδιάμεσο. Ή είναι το αντίθετο; Και τι γίνεται με τις μάσκες που έχουν ήδη κανάλι άλφα; Και θεωρούνται οι περιοχές σε ένα αρχείο SVG χωρίς τίποτα σε αυτές άλφα διαφανείς; Πιθανώς? Ας παίξουμε.

ενδιαφέροντα άρθρα...