mask প্রপার্টি

mask প্রপার্টিটি是所有 মাস্কিং প্রপার্টির জন্য একটি সংক্ষিপ্ত রূপ এবং এটি নির্দিষ্ট করতে দেয়: একটি ইমেজ-মাস্ক, এর অবস্থান, আকার, ব্লেন্ড মোড এবং অন্যান্য প্যারামিটার।

নিম্নলিখিত প্রপার্টিগুলির জন্য একটি সংক্ষিপ্ত রূপ প্রপার্টি: mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite.

সিনট্যাক্স

cssসিলেক্টর {
  mask: [mask-image] [mask-position] / [mask-size]
        [mask-repeat] [mask-origin] [mask-clip]
        [mask-mode] [mask-composite];
}

মানসমূহ

ইমেজ প্রস্তুতি

ধরুন আমাদের কাছে প্রকৃতির একটি ছবি আছে যা আমরা ক্রপ করব, এবং হার্ট এবং তীরের SVG ছবি আছে, যেগুলো অনুসারে আমরা কাটআউট করব:

html<img src="image.jpg" width="500">
<br>
<img src="heart.svg" width="300">
<br>
<img src="arrow.svg" width="300">

Результат:

উদাহরণ . ইমেজ মাস্ক

আসুন আমাদের ছবির উপর একটি হার্ট মাস্ক প্রয়োগ করি:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  background: red;
  mask: url("heart.svg") center/300px no-repeat;
}

Результат:

উদাহরণ . মাস্কের অবস্থান

উপরের বাম কোণে হার্ট মাস্ক:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") left top/150px no-repeat;
}

Результат:

উদাহরণ . মাস্কের অবস্থান

নীচের ডান কোণে হার্ট মাস্ক:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") right bottom/150px no-repeat;
}

Результат:

উদাহরণ . মাস্কের অবস্থান

বাম দিকে কেন্দ্রে হার্ট মাস্ক:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") left center/150px no-repeat;
}

Результат:

উদাহরণ . মাস্কের অবস্থান

কেন্দ্রে হার্ট মাস্ক:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") center/150px no-repeat;
}

Результат:

উদাহরণ . মাস্কের অবস্থান

হার্ট মাস্ক বাম থেকে 100px এবং উপরে থেকে 200px:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") 100px 200px /150px no-repeat;
}

Результат:

উদাহরণ . মাস্কের আকার cover

cover মানটি মাস্ককে স্কেল করে যাতে এটি এলিমেন্টটিকে সম্পূর্ণরূপে覆盖 করে, অনুপাত বজায় রেখে। যদি অনুপাত মেলে না হয় তবে মাস্কের প্রান্তগুলি কাটা যেতে পারে:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") center/cover;
}

Результат:

উদাহরণ . মাস্কের আকার contain

contain মানটি মাস্ককে স্কেল করে যাতে এটি সম্পূর্ণরূপে এলিমেন্টের মধ্যে fits, অনুপাত বজায় রেখে। এটি খালি জায়গা রেখে যেতে পারে:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") center/contain no-repeat;
}

Результат:

উদাহরণ . মাস্কের আকার

একটি নির্দিষ্ট আকার মাস্কের সঠিক মাত্রা সেট করে। উদাহরণস্বরূপ, 50px আকারের একটি মাস্ক তৈরি করা যাক:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") center/50px no-repeat;
}

Результат:

উদাহরণ . পুনরাবৃত্তি no-repeat

no-repeat মানটি মাস্কের পুনরাবৃত্তি বন্ধ করে দেয়। মাস্কটি নির্দিষ্ট অবস্থানে শুধুমাত্র একবার প্রদর্শিত হয়:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") top left / 150px no-repeat;
}

Результат:

উদাহরণ . পুনরাবৃত্তি repeat-x

repeat-x মানটি শুধুমাত্র অনুভূমিক অক্ষ বরাবর মাস্ক পুনরাবৃত্তি করে:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") left center / 50px repeat-x;
}

Результат:

উদাহরণ . কম্পোজিশন add

add মানটি একাধিক মাস্ক যোগ করে (ফলাফল - সমস্ত মাস্কের মিলন):

html<img id="image" src="image.jpg">

css#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 মানটি শুধুমাত্র মাস্কগুলির ছেদকৃত এলাকা দেখায়:

html<img id="image" src="image.jpg">

css#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 মানটি মাস্কগুলির সেই এলাকাগুলি দেখায় যা ছেদ করে না:

html<img id="image" src="image.jpg">

css#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 মানটি প্রথম মাস্ক থেকে দ্বিতীয় মাস্কটি বিয়োগ করে। উদাহরণস্বরূপ, একটি হার্ট তৈরি করা যাক এবং এটি থেকে একটি তীর বিয়োগ করা যাক:

html<img id="image" src="image.jpg">

css#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 প্রপার্টি, পৃথক উপাদান দ্বারা লেখা:

html<img id="image" src="image.jpg">

css#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 এলিমেন্ট ব্যবহার ছবির জন্য:

html<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>

css#image {
  width: 500px;
  height: 281px;
  background: red;
  mask: url(#mask);
}

Результат:

উদাহরণ . গ্রেডিয়েন্টের জন্য SVG

একটি মাস্ক হিসাবে SVG এলিমেন্ট ব্যবহার গ্রেডিয়েন্টের জন্য:

html<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>

css#elem {
  width: 500px;
  height: 300px;
  background: linear-gradient(45deg, red, blue);
  mask: url(#star-mask);
}

Результат:

আরও দেখুন