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 মানটি মাস্ককে স্কেল করে যাতে এটি সম্পূর্ণরূপে এলিমেন্টের মধ্যে fits,
অনুপাত বজায় রেখে। এটি খালি জায়গা রেখে যেতে পারে:
<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প্রপার্টি,
নির্ধারণ করে কিভাবে একাধিক মাস্ক একত্রিত হয়
