Veturia mask-size
Veturia mask-size vendos madhësinë e imazhit të maskës. Mund të vendosni madhësi specifike në piksel/ përqindje ose të përdorni fjalët kyçe cover dhe contain.
Sintaksa
selektori {
mask-size: auto | <length> | <percentage> | cover | contain;
}
Vlerat
| Vlera | Përshkrimi |
|---|---|
auto |
Madhësia origjinale e imazhit (parazgjedhur). |
cover |
Shkallëzon maskën duke ruajtur përmasat, në mënyrë që ajo të mbulojë plotësisht elementin. |
contain |
Shkallëzon maskën duke ruajtur përmasat, në mënyrë që ajo të përshtatet plotësisht brenda elementit. |
100px 50px |
Madhësi specifike në piksel. |
50% 100% |
Madhësi në përqindje nga madhësitë e elementit. |
Shembull . Madhësia cover
Maskja shkallëzohet për të mbuluar plotësisht elementin:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: cover;
mask-repeat: no-repeat;
}
:
Shembull . Madhësia contain
Maskja shkallëzohet për t'u përshtatur plotësisht brenda elementit:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
}
:
Shembull . Madhësi e fiksuar në piksel
Maskë me madhësi 150×150 piksel:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Shembull . Madhësi në përqindje
Maskja zë 80% të gjerësisë dhe 60% të lartësisë së elementit:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 80% 60%;
mask-repeat: no-repeat;
}
:
Shembull . Madhësi të ndryshme përgjatë akseve
Maskë 200px gjerësi dhe 100px lartësi:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 200px 100px;
mask-repeat: no-repeat;
}
:
Shihni gjithashtu
-
veturia
mask-position,
përcakton pozicionin e maskës -
veturia
mask-repeat,
përcakton përsëritjen e maskës -
veturia
mask,
shkurtim për të gjitha vetitë e maskimit
