Modalità maschera - Trucchi CSS

La mask-modeproprietà CSS indica se l'immagine del livello maschera CSS viene trattata come una maschera alfa o una maschera di luminanza.

.element ( mask-image: url(sun.svg); mask-mode: alpha; )

Sintassi

mask-mode: alpha | luminance | match-source

La proprietà accetta un valore della parola chiave, o un elenco separato da virgole di due o tutte e tre le alpha, luminancee mask-sourcevalori.

Valore iniziale: match-source
Si applica a: tutti gli elementi. In SVG, si applica agli elementi contenitore escludendo l'elemento, tutti gli elementi grafici.
Ereditato: no
Valore calcolato: come specificato
Tipo di animazione: discreta

Valori

/* Keyword values */ mask-mode: alpha; mask-mode: luminance; mask-mode: match-source; /* Global values */ mask-mode: inherit; mask-mode: initial; mask-mode: unset;

alpha: specifica che i valori alfa (canale alfa) dell'immagine del livello maschera devono essere usati come valori maschera.
luminance: specifica che i valori di luminanza dell'immagine maschera devono essere utilizzati come valori maschera.
match-source: il valore predefinito, che imposta la modalità maschera su alfa se il riferimento alla maschera della mask-imageproprietà è un elemento CSS come l'URL di un'immagine o un gradiente. Tuttavia, se il riferimento alla maschera della mask-imageproprietà è un elemento SVG , è necessario utilizzare il valore specificato dalla proprietà di tipo maschera dell'elemento a cui si fa riferimento .
initial: applica l'impostazione predefinita della proprietà, ovvero match-source.
inherit: adotta il valore della modalità maschera del genitore.
unset: rimuove la modalità maschera corrente dall'elemento.

Utilizzo di più valori

Questa proprietà può accettare un elenco di valori separati da virgole per le modalità maschera e ogni valore viene applicato a un'immagine del livello maschera corrispondente specificata nella proprietà maschera-immagine.

Nell'esempio seguente, il primo valore specifica la modalità maschera corrispondente alla prima immagine, il secondo valore per la seconda immagine e così via.

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-mode: luminance, alpha, match-source; )

Maschere alfa e luminanza

Il mascheramento in CSS include due metodi che presentano alcune differenze nel calcolo dei valori della maschera.

Maschere alfa

Le immagini sono fatte di pixel, ogni pixel ha alcuni dati contenenti valori di colore e forse valori alfa con informazioni sulla trasparenza. Un'immagine con un canale alfa può essere una maschera alfa , come le immagini PNG con aree nere e trasparenti.

In una semplice operazione di mascheramento, abbiamo un elemento e un'immagine maschera posizionati sopra di esso. Il valore alfa di ogni pixel nell'immagine maschera verrà unito al pixel corrispondente nell'elemento.

Se il valore alfa è zero (cioè trasparente), vince e quella parte dell'elemento è mascherata (cioè nascosta).
Un valore alfa di uno (cioè completamente opaco) consente a quel pixel dell'elemento di essere visibile.
Un valore compreso tra 0 e 1 (es. 0,5) permette al pixel di essere visibile ma con un certo livello di trasparenza.

Quindi, in questo metodo, il valore della maschera in un dato punto è semplicemente il valore del canale alfa in quel punto dell'immagine della maschera ei canali di colore non contribuiscono al valore della maschera.

L'esempio seguente è una maschera alfa che contiene solo aree nere (valore alfa 1) e trasparenti (valore alfa 0) e puoi vedere il risultato che ha alcune parti completamente visibili e altre completamente trasparenti:

Utilizzo di un PNG con un canale alfa come immagine maschera

Ma nel seguente esempio, stiamo usando un gradiente con un diverso livello di trasparenza. Il risultato non è solo visibile o trasparente, ma ci sono alcune aree traslucide:

img ( mask-image: linear-gradient(black, transparent); mask-mode: alpha; )

Ed ecco come appare il risultato nel browser:

Utilizzo di un gradiente lineare come immagine maschera

Maschere di luminanza

In una maschera di luminanza, i colori ei valori alfa contano. Quando il valore alfa è 0 (cioè completamente trasparente), l'elemento è nascosto; quando il valore alfa è 1, i valori della maschera variano a seconda del canale di colore di quel pixel. Ad esempio, quando il colore è bianco, l'elemento è visibile; nel caso dell'area nera l'elemento è nascosto.

Mentre il calcolo dei valori della maschera in una maschera alfa si basa solo sui valori alfa dell'immagine maschera, i valori della maschera di una maschera di luminanza vengono calcolati dalla luminanza e dai valori alfa. I browser eseguono questa operazione nei seguenti passaggi:

Calcola un valore di luminanza dai valori del canale del colore.
Moltiplica il valore di luminanza calcolato per il valore alfa corrispondente per produrre il valore della maschera.

/ spiegazione Per ulteriori informazioni su questi calcoli, è possibile controllare la sezione sull'elaborazione della maschera nelle specifiche del modulo di mascheramento CSS 1 dalla bozza dell'editore di settembre 2019.

Di seguito è un'immagine maschera con un sole bianco al centro e aree trasparenti intorno ad esso. Come puoi vedere, le aree while sono completamente visibili:

Utilizzo di un'immagine PNG con un canale alfa e aree bianche come immagine maschera

E nel prossimo esempio, un gradiente colorato viene utilizzato come immagine maschera e puoi vedere l'effetto di colori diversi sui valori della maschera in modalità luminanza: