mask-repeat প্রপার্টি

mask-repeat প্রপার্টি মাস্কের পুনরাবৃত্তির পদ্ধতি নির্দিষ্ট করে, যদি এর মাত্রা এলিমেন্টের মাত্রার চেয়ে কম হয়। এটি background-repeat-এর মতো একইভাবে কাজ করে, কিন্তু মাস্কের জন্য প্রয়োগ করা হয়।

সিনট্যাক্স

cssসিলেক্টর {
  mask-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat;
}

মানসমূহ

উদাহরণ . পুনরাবৃত্তি ছাড়া (no-repeat)

কেন্দ্রে একটি হার্ট, কোনো পুনরাবৃত্তি ছাড়াই:

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

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

Результат:

উদাহরণ . অনুভূমিক পুনরাবৃত্তি (repeat-x)

হার্টগুলি শুধুমাত্র অনুভূমিকভাবে পুনরাবৃত্তি হয়:

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

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

Результат:

উদাহরণ . উল্লম্ব পুনরাবৃত্তি (repeat-y)

হার্টগুলি শুধুমাত্র উল্লম্বভাবে পুনরাবৃত্তি হয়:

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

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

Результат:

উদাহরণ . ব্যবধান সহ পুনরাবৃত্তি (space)

হার্টগুলি সমান ব্যবধান সহ বন্টন করা হয়েছে:

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

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-size: 80px;
  mask-repeat: space;
}

Результат:

উদাহরণ . স্কেলযোগ্য পুনরাবৃত্তি (round)

হার্টগুলি সমানভাবে পূরণ করার জন্য স্কেল করা হয়:

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

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-size: 80px;
  mask-repeat: round;
}

Результат:

আরও দেখুন