mask ගුණය
mask ගුණය යනු සියලු ආවරණ ගුණ සඳහා කෙටි යෙදුමක් වන අතර මඟින් නිරවුල් කිරීමට හැකිය:
පින්තූර-ආවරණයක්, එහි ස්ථානය, ප්රමාණය, එකතු කිරීමේ ප්රකාරය සහ වෙනත් පරාමිතීන්.
පහත ගුණ සඳහා ගුණ-කෙටි යෙදුමකි:
mask-image,
mask-position,
mask-size,
mask-repeat,
mask-origin,
mask-clip,
mask-mode,
mask-composite.
වාක්ය රීතිය
තෝරන්නා {
mask: [mask-image] [mask-position] / [mask-size]
[mask-repeat] [mask-origin] [mask-clip]
[mask-mode] [mask-composite];
}
මූල්යයන්
| මුල්යය | විස්තරය |
|---|---|
none |
ආවරණය අක්රීය කරයි (පෙරනිමි මූල්යය) |
url() |
පින්තූර-ආවරණය වෙත මාර්ගය (SVG, PNG) |
linear-gradient() |
ආවරණයක් ලෙස රේඛීය අතීත රේඛාව |
radial-gradient() |
ආවරණයක් ලෙස අරය අතීත රේඛාව |
position |
ආවරණයේ ස්ථානය (top, center, 50% 50% සහ වෙනත්) |
size |
ආවරණයේ ප්රමාණය (cover, contain, 100px 50px) |
repeat |
ආවරණයේ පුනරාවර්තනය (no-repeat, repeat-x, space) |
mode |
එකතු කිරීමේ ප්රකාරය (alpha, luminance, match-source) |
composite |
ආවරණ සංයෝජනය (add, subtract, intersect, exclude) |
පින්තූර සූදානම් කිරීම
අප සතුව ස්වභාවයේ පින්තූරයක් ඇතැයි සිතමු, එය අපි කපා දමනු ඇත, සහ හදවතේ සහ ඊතලයේ SVG පින්තූර, ඒවා ඔස්සේ අපි කපා ගනිමු:
<img src="image.jpg" width="500">
<br>
<img src="heart.svg" width="300">
<br>
<img src="arrow.svg" width="300">
:
නිදර්ශනය . පින්තූර-ආවරණය
අපගේ පින්තූරය මත හදවත්-ආවරණය යොදමු:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
background: red;
mask: url("heart.svg") center/300px no-repeat;
}
:
නිදර්ශනය . ආවරණයේ ස්ථානය
වම් ඉහළ කෙළවරේ හදවත්-ආවරණය:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") left top/150px no-repeat;
}
:
නිදර්ශනය . ආවරණයේ ස්ථානය
දකුණු පහළ කෙළවරේ හදවත්-ආවරණය:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") right bottom/150px no-repeat;
}
:
නිදර්ශනය . ආවරණයේ ස්ථානය
වම් පස මධ්යයේ හදවත්-ආවරණය:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") left center/150px no-repeat;
}
:
නිදර්ශනය . ආවරණයේ ස්ථානය
මධ්යයේ හදවත්-ආවරණය:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") center/150px no-repeat;
}
:
නිදර්ශනය . ආවරණයේ ස්ථානය
වමින් 100px සහ ඉහළින් 200px හදවත්-ආවරණය:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") 100px 200px /150px no-repeat;
}
:
නිදර්ශනය . ආවරණයේ ප්රමාණය cover
cover මුල්යය මඟින් මූලද්රව්යය සම්පූර්ණයෙන් ආවරණය කිරීමට ආවරණය පරිමාණ කරයි, අනුපාත රඳවා ගනිමින්.
අනුපාත ගැලපෙන්නේ නම් ආවරණයේ කෙළවර කපා දැමිය හැකිය:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") center/cover;
}
:
නිදර්ශනය . ආවරණයේ ප්රමාණය contain
contain මුල්යය මඟින් ආවරණය මූලද්රව්යය තුළ සම්පූර්ණයෙන් ගැලපෙන පරිදි පරිමාණ කරයි,
අනුපාත රඳවා ගනිමින්. හිස් ප්රදේශ ඉතිරි කළ හැකිය:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") center/contain no-repeat;
}
:
නිදර්ශනය . ආවරණයේ ප්රමාණය
ස්ථාවර ප්රමාණය ආවරණයේ නිශ්චිත මාන සකස් කරයි.
උදාහරණයක් ලෙස අපි 50px ප්රමාණයේ ආවරණයක් සාදමු:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") center/50px no-repeat;
}
:
නිදර්ශනය . පුනරාවර්තනය no-repeat
no-repeat මුල්යය ආවරණයේ පුනරාවර්තනය අක්රීය කරයි.
ආවරණය නිශ්චිත ස්ථානයේ එක් වරක් පමණක් පෙන්වයි:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") top left / 150px no-repeat;
}
:
නිදර්ශනය . පුනරාවර්තනය repeat-x
repeat-x මුල්යය ආවරණය තිරස් අක්ෂය ඔස්සේ පමණක් පුනරාවර්තනය කරයි:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") left center / 50px repeat-x;
}
:
නිදර්ශනය . සංයෝජනය add
add මුල්යය බහු ආවරණ එකට එක් කරයි (ප්රතිඵලය - සියලු ආවරණවල එකතුව):
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask:
url("heart.svg") 100px 50px / 150px no-repeat,
url("arrow.svg") 200px 30px / 150px no-repeat;
mask-composite: add;
}
:
නිදර්ශනය . සංයෝජනය intersect
intersect මුල්යය ආවරණවල ඡේදනය වන ප්රදේශය පමණක් පෙන්වයි:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask:
url("heart.svg") 100px 50px / 150px no-repeat,
url("arrow.svg") 50px 30px / 150px no-repeat;
mask-composite: intersect;
}
:
නිදර්ශනය . සංයෝජනය exclude
exclude මුල්යය ඡේදනය නොවන ආවරණවල ප්රදේශ පෙන්වයි:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask:
url("heart.svg") 100px 50px / 150px no-repeat,
url("arrow.svg") 50px 30px / 150px no-repeat;
mask-composite: exclude;
}
:
නිදර්ශනය . සංයෝජනය subtract
subtract මුල්යය පළමු ආවරණයෙන් දෙවැන්න අඩු කරයි.
නිදර්ශනය සඳහා එක් හදවත් සාදා එයින්
ඊතලය අඩු කරමු:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask:
url("heart.svg") 100px 50px / 250px no-repeat,
url("arrow.svg") 170px 80px / 120px no-repeat;
mask-composite: subtract;
}
:
නිදර්ශනය . mask හි විස්තීර්ණ ලිවීම
mask ගුණය, වෙන වෙනම අංග ලෙස ලියන ලද:
<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;
mask-origin: content-box;
mask-clip: content-box;
mask-mode: alpha;
mask-composite: add;
}
:
නිදර්ශනය . පින්තූරය සඳහා SVG
පින්තූරයක් සඳහා ආවරණයක් ලෙස SVG-මූලද්රව්යය භාවිතා කිරීම
<img id="image" src="image.jpg">
<svg width="0" height="0">
<mask id="mask">
<path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
</mask>
</svg>
#image {
width: 500px;
height: 281px;
background: red;
mask: url(#mask);
}
:
නිදර්ශනය . අතීත රේඛාව සඳහා SVG
අතීත රේඛාවක් සඳහා ආවරණයක් ලෙස SVG-මූලද්රව්යය භාවිතා කිරීම
<div id="elem"></div>
<svg width="0" height="0">
<mask id="star-mask">
<path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
</mask>
</svg>
#elem {
width: 500px;
height: 300px;
background: linear-gradient(45deg, red, blue);
mask: url(#star-mask);
}
:
මෙයද බලන්න
-
mask-positionගුණය,
මූලද්රව්යයට සාපේක්ෂව ආවරණයේ ස්ථානය නිර්වචනය කරයි -
mask-imageගුණය,
ආවරණය සඳහා පින්තූරයක් නියම කරයි -
mask-modeගුණය,
ආවරණය පසුබිම සමඟ අන්තර්ක්රියා කරන ආකාරය නිර්වචනය කරයි -
mask-sizeගුණය,
ආවරණයේ ප්රමාණය නිර්වචනය කරයි -
mask-repeatගුණය,
ආවරණයේ පුනරාවර්තනය නිර්වචනය කරයි -
mask-originගුණය,
ආවරණය ස්ථානගත කිරීමේ ප්රදේශය නිර්වචනය කරයි -
mask-clipගුණය,
ආවරණය කපා හැරීමේ ප්රදේශය නිර්වචනය කරයි -
mask-compositeගුණය,
බහු ආවරණ ඒකාබද්ධ වන ආකාරය නිර්වචනය කරයි
