CSS mask-position
La proprietà CSS3 mask-position definisce la posizione della maschera sull'elemento
La proprietà mask-position in CSS3 consente di specificare la posizione iniziale dell'immagine maschera rispetto all'elemento a cui viene applicata. Si possono usare parole chiave come left, center, right oppure valori numerici in px, %, ecc., per posizionare la maschera in modo preciso.
Sintassi
mask-position: x-position y-position;
Significato dei valori principali:
- x-position: valore orizzontale della posizione, può essere una parola chiave (
left,center,right) o una lunghezza (px,%,em). - y-position: valore verticale della posizione, può essere una parola chiave (
top,center,bottom) o una lunghezza (px,%,em). - Se viene specificato un solo valore, il secondo è implicito come
center.
Esempio proprietà: mask-position
Codice Esempio: mask-position
CODE: CSS
.mask-pos {
width: 200px;
height: 200px;
margin: 15px;
background-color: #007acc;
color: white;
font-weight: bold;
font-size: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
mask-image: radial-gradient(circle, black 40%, transparent 100%);
mask-repeat: no-repeat;
mask-size: 80% 80%;
-webkit-mask-image: radial-gradient(circle, black 40%, transparent 100%);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 80% 80%;
}.pos-top-left {
mask-position: left top;
-webkit-mask-position: left top;
}.pos-center {
mask-position: center;
-webkit-mask-position: center;
}.pos-bottom-right {
mask-position: right bottom;
-webkit-mask-position: right bottom;
}
Contenuto Esempio: mask-position
Esempio di utilizzo di mask-position
In questo esempio, un elemento con sfondo colorato ha una maschera posizionata in tre modi differenti utilizzando mask-position.
left top
center
right bottom
CSS e HTML per l'elemento con mask-position:
<style>
.mask-pos {
width: 200px;
height: 200px;
margin: 15px;
background-color: #007acc;
color: white;
font-weight: bold;
font-size: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
mask-image: radial-gradient(circle, black 40%, transparent 100%);
mask-repeat: no-repeat;
mask-size: 80% 80%;
-webkit-mask-image: radial-gradient(circle, black 40%, transparent 100%);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 80% 80%;
}
.pos-top-left {
mask-position: left top;
-webkit-mask-position: left top;
}
.pos-center {
mask-position: center;
-webkit-mask-position: center;
}
.pos-bottom-right {
mask-position: right bottom;
-webkit-mask-position: right bottom;
}
</style>
<div>
<div class="mask-pos pos-top-left">left top</div>
<div class="mask-pos pos-center">center</div>
<div class="mask-pos pos-bottom-right">right bottom</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
