CSS mask-size
La proprietà CSS3 mask-size definisce la dimensione dell'immagine maschera
La proprietà mask-size in CSS3 consente di specificare la dimensione dell'immagine maschera applicata a un elemento. È possibile impostare la larghezza e l'altezza usando valori come auto, cover, contain, o misure specifiche in px, % e altre unità.
Sintassi
mask-size: auto | cover | contain | <lunghezza> | <percentuale> | <larghezza> <altezza>;
Significato dei valori principali:
- auto: mantiene la dimensione originale dell’immagine maschera.
- cover: scala la maschera per coprire completamente l’elemento, mantenendo le proporzioni.
- contain: scala la maschera per essere contenuta interamente nell’elemento, mantenendo le proporzioni.
- <lunghezza> / <percentuale>: specifica larghezza e/o altezza della maschera (es.
100px 50%). - Se viene specificato un solo valore, l’altro è impostato su
auto.
Esempio proprietà: mask-size
Codice Esempio: mask-size
CODE: CSS
.mask-size-box {
width: 220px;
height: 220px;
margin: 15px;
background-color: #4a90e2;
color: white;
font-weight: bold;
font-size: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
mask-image: url('https://example.com/400px_black.svg');
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-image: url('https://example.com/400px_black.svg');
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}.size-auto {
mask-size: auto;
-webkit-mask-size: auto;
}.size-cover {
mask-size: cover;
-webkit-mask-size: cover;
}.size-contain {
mask-size: contain;
-webkit-mask-size: contain;
}.size-custom {
mask-size: 100px 150px;
-webkit-mask-size: 100px 150px;
}
Contenuto Esempio: mask-size
Esempio di utilizzo di mask-size
In questo esempio, la dimensione della maschera viene variata su tre elementi utilizzando valori diversi di mask-size.
auto
cover
contain
100px 150px
CSS e HTML per l'elemento con mask-size:
<style>
.mask-size-box {
width: 220px;
height: 220px;
margin: 15px;
background-color: #4a90e2;
color: white;
font-weight: bold;
font-size: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
mask-image: url('https://example.com/400px_black.svg');
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-image: url('https://example.com/400px_black.svg');
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
.size-auto {
mask-size: auto;
-webkit-mask-size: auto;
}
.size-cover {
mask-size: cover;
-webkit-mask-size: cover;
}
.size-contain {
mask-size: contain;
-webkit-mask-size: contain;
}
.size-custom {
mask-size: 100px 150px;
-webkit-mask-size: 100px 150px;
}
</style>
<div>
<div class="mask-size-box size-auto">auto</div>
<div class="mask-size-box size-cover">cover</div>
<div class="mask-size-box size-contain">contain</div>
<div class="mask-size-box size-custom">100px 150px</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
