mask-mode - CSS: Cascading Style Sheets | MDN
source link: https://developer.mozilla.org/en-US/docs/Web/CSS/mask-mode
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
mask-mode
The mask-mode CSS property sets whether the mask reference defined by mask-image is treated as a luminance or alpha mask.
/* Keyword values */
mask-mode: alpha;
mask-mode: luminance;
mask-mode: match-source;
/* Multiple values */
mask-mode: alpha, match-source;
/* Global values */
mask-mode: inherit;
mask-mode: initial;
mask-mode: revert;
mask-mode: revert-layer;
mask-mode: unset;
Syntax
The mask-mode property is specified as one or more of the keyword values listed below, separated by commas.
Values
alpha
This keyword indicates that the transparency (alpha channel) values of the mask layer image should be used as the mask values.
luminance
This keyword indicates that the luminance values of the mask layer image should be used as the mask values.
match-source
If the mask-image property is of type <mask-source>, the luminance values of the mask layer image should be used as the mask values.
If it is of type <image>, the alpha values of the mask layer image should be used as the mask values.
Formal definition
| Initial value | match-source |
|---|---|
| Applies to | all elements; In SVG, it applies to container elements excluding the defs element and all graphics elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |
Formal syntax
Examples
Using alpha mask mode
Specifications
| Specification |
|---|
| CSS Masking Module Level 1 # the-mask-mode |
Browser compatibility
Report problems with this compatibility data on GitHub
| desktop | mobile | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on iOS | Samsung Internet | WebView Android | ||
mask-mode |
Legend
Tip: you can click/tap on a cell for more information.
Recommend
-
105
Cascading Style Alignment Chart Add to FavoritesShareCascading S...
-
156
Headless mode is a useful way to run Firefox, which is just as it sounds — Firefox is run as normal, except without any of the UI components visible. This may not be very useful for surfing the web, but it is very useful for automated testing. T...
-
12
Masonry Layout Level 3 of the CSS Grid Layout specification includes a masonry value for
-
5
Using CSS animations CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of k...
-
8
@dolamu-asipaDolamu AsipaHey there! i'm an aspiring developerBrief BackgroundCSS (Cascading Style Sheets) is not a...
-
4
CSS (Cascading Style Sheet)Hi everyone, it’s me again, Beauty James. In my previous articles, I discussed frontend and its languages. So today, I’ll be talking about CSS, another Frontend language. As we move further, we will discuss the foll...
-
9
CSS Cascading and Inheritance Level 4↑ → Abstract This CSS module describes how to collate style r...
-
8
Recreating MDN’s Truncated Text Effect Geof...
-
7
A Use Case for Cascading Attribute Sheets October 20, 2022 It’s been some years since Tab Atkins-Bittner first pr...
-
12
Episode transcript Ryan Burgess Welcome to a new episode of the front end happier podcast in I think it was our one of our recent episodes, probably two or three episodes ago, we were joined by Chris coIour...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK