mask-size հատկությունը
mask-size հատկությունը սահմանում է դիմակի պատկերի չափը: Կարելի է սահմանել կոնկրետ չափեր պիքսելներով/տոկոսներով կամ օգտագործել cover և contain բանալի բառերը:
Սինտաքս
ընտրիչ {
mask-size: auto | <length> | <percentage> | cover | contain;
}
Արժեքներ
| Արժեք | Նկարագրություն |
|---|---|
auto |
Պատկերի բնօրինակ չափը (լռելայնով): |
cover |
Մասշտաբավորում է դիմակը՝ պահպանելով համամասնությունները, որպեսզի այն ամբողջությամբ ծածկի տարրը: |
contain |
Մասշտաբավորում է դիմակը՝ պահպանելով համամասնությունները, որպեսզի այն ամբողջությամբ տեղավորվի տարրի մեջ: |
100px 50px |
Կոնկրետ չափեր պիքսելներով: |
50% 100% |
Չափերը տոկոսներով տարրի չափերից: |
Օրինակ . Cover չափ
Դիմակը մասշտաբավորվում է՝ ամբողջությամբ ծածկելու տարրը.
<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;
}
:
Օրինակ . Contain չափ
Դիմակը մասշտաբավորվում է՝ ամբողջությամբ տեղավորվելու տարրի մեջ.
<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;
}
:
Օրինակ . Ֆիքսված չափ պիքսելներով
150×150 պիքսել չափով դիմակ.
<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;
}
:
Օրինակ . Չափ տոկոսներով
Դիմակը զբաղեցնում է տարրի լայնության 80%-ը և բարձրության 60%-ը.
<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;
}
:
Օրինակ . Տարբեր չափեր առանցքներով
Դիմակը 200px լայնությամբ և 100px բարձրությամբ.
<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;
}
:
Տես նաև
-
mask-positionհատկությունը,
սահմանում է դիմակի դիրքը -
mask-repeatհատկությունը,
սահմանում է դիմակի կրկնությունը -
maskհատկությունը,
կարճ գրառում բոլոր դիմակավորման հատկությունների համար
