CSS mask-mode
La proprietà CSS3 mask-mode definisce il tipo di maschera applicata
La proprietà mask-mode in CSS3 specifica se la maschera applicata utilizza il canale alpha (trasparenza) o la luminanza (valore di luminosità) per determinare la visibilità dell'elemento. Il valore predefinito è alpha, ma con luminance è possibile utilizzare immagini senza canale alpha come maschere efficaci.
Sintassi
mask-mode: alpha | luminance;
Significato dei valori principali:
- alpha: Usa il canale alpha (trasparenza) dell'immagine maschera per determinare la visibilità. Valore predefinito.
- luminance: Usa la luminosità dell'immagine maschera per definire la trasparenza, convertendo i valori di grigio in opacità.
Esempio proprietà: mask-mode
Codice Esempio: mask-mode
CODE: CSS
.mask-mode-alpha, .mask-mode-luminance {
width: 150px;
height: 150px;
margin: 15px;
background-color: #ff6347;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 16px;
border-radius: 10px;
}.mask-mode-alpha {
mask-image: url('https://example.com/mask_example.png');
mask-mode: alpha;
-webkit-mask-image: url('https://example.com/mask_example.png');
-webkit-mask-mode: alpha;
}.mask-mode-luminance {
mask-image: url('https://example.com/mask_example.png');
mask-mode: luminance;
-webkit-mask-image: url('https://example.com/mask_example.png');
-webkit-mask-mode: luminance;
}
Contenuto Esempio: mask-mode
Esempio di utilizzo di mask-mode
In questo esempio, vengono applicate due maschere con valori differenti di mask-mode per mostrare la differenza tra alpha e luminance.
Alpha
Luminance
CSS e HTML per l'elemento con mask-mode:
<style>
.mask-mode-alpha, .mask-mode-luminance {
width: 150px;
height: 150px;
margin: 15px;
background-color: #ff6347;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 16px;
border-radius: 10px;
}
.mask-mode-alpha {
mask-image: url('https://example.com/mask_example.png');
mask-mode: alpha;
-webkit-mask-image: url('https://example.com/mask_example.png');
-webkit-mask-mode: alpha;
}
.mask-mode-luminance {
mask-image: url('https://example.com/mask_example.png');
mask-mode: luminance;
-webkit-mask-image: url('https://example.com/mask_example.png');
-webkit-mask-mode: luminance;
}
</style>
<div>
<div class="mask-mode-alpha">Alpha</div>
<div class="mask-mode-luminance">Luminance</div>
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.108
