CSS mask-repeat প্রতিভূতি

  • পূর্ববর্তী পৃষ্ঠা mask-position
  • পরবর্তী পৃষ্ঠা mask-size

বিবরণ ও ব্যবহার

mask-repeat লক্ষ্যণ সেটিং মাস্ক ছবি কীভাবে/কীভাবে পুনরাবৃত্ত করবে নির্দেশ করে。

ডিফল্ট অবস্থায়, মাস্ক ছবি ভিক্টরিয়াল এবং হোরিজন্টাল দিকেই পুনরাবৃত্ত হবে。

উদাহরণ

উদাহরণ 1

ব্যবহার mask-repeat: no-repeat; এবং mask-repeat: repeat;：

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: no-repeat;
}
.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: repeat;
}

স্বয়ং প্রয়াস করুন

উদাহরণ 2

ব্যবহার mask-repeat: round; এবং mask-repeat: space;：

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: round;
}
.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: space;
}

স্বয়ং প্রয়াস করুন

উদাহরণ 3

ব্যবহার mask-repeat: repeat-x; এবং mask-repeat: repeat-y;：

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: repeat-x;
}
.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: repeat-y;
}

স্বয়ং প্রয়াস করুন

CSS গ্রামার

mask-repeat: repeat|repeat-x|repeat-y|space|round|no-repeat|initial|inherit;

লক্ষ্যণমান

মান বর্ণনা
repeat

মাস্ক ছবি ভিক্টরিয়াল এবং হোরিজন্টাল দিকেই পুনরাবৃত্ত হবে。

যদি শেষ ছবি উপযুক্ত না হয়, তবে তা কাটা হবে。

এটি ডিফল্ট মান
repeat-x মাস্ক ছবি কেবল হোরিজন্টাল দিকে পুনরাবৃত্ত হবে。
repeat-y মাস্ক ছবি কেবল ভিক্টরিয়াল দিকে পুনরাবৃত্ত হবে。
space

মাস্ক ছবি যথাসম্ভব বেশি পুনরাবৃত্ত হবে এবং কাটা হবে না。

প্রথম এবং শেষ ছবি যথাক্রমে ইলেক্ট্রনের দুই পাশে স্থাপিত হবে, ছবির মধ্যে খালি জায়গা সমানভাবে বিতরিত হবে。
round মাস্ক ছবি পুনরাবৃত্ত হবে এবং স্পেসকে পূর্ণ করতে সংকুচিত বা সম্প্রসারিত করা হবে (কোনো সীমানা নেই)。
no-repeat মাস্ক ছবি পুনরাবৃত্ত হবে না। ছবি কেবল একবার দেখানো হবে。
initial এই লক্ষ্যণটি তার ডিফল্ট মানে ন্যায়ায়িত করুন। দেখুন initial。
inherit এই লক্ষ্যণটি পারেন্ট ইলেক্ট্রনটি থেকে উত্তরসূরী করুন। দেখুন inherit。

প্রযুক্তিগত বিবরণ

ডিফল্ট মান: repeat
উত্তরসূরীতা: না
অ্যানিমেশন নির্মাণ: সমর্থন নেই। দেখুন:অ্যানিমেশন-সংক্রান্ত লক্ষ্যণ。
সংস্করণ: CSS মাস্কিং মডিউল লেভেল 1
জেভাস্ক্রিপ্ট গ্রামার: object.style.maskRepeat="no-repeat"

ব্রাউজার সমর্থন

টেবিলের সংখ্যা এই লক্ষ্যণটি সম্পূর্ণরূপে সমর্থনকারী প্রথম ব্রাউজারের সংস্করণকে নির্দেশ করে。

চ্রোম এজ ফায়ারফক্স স্যাফারি অপেরা
120 120 53 15.4 106

সংশ্লিষ্ট পৃষ্ঠা

শিক্ষা:CSS ছাদ

উল্লেখ:CSS mask প্রতিভূতি

উল্লেখ:CSS mask-clip প্রতিভূতি

উল্লেখ:CSS mask-composite প্রতিভূতি

উল্লেখ:CSS mask-image প্রতিভূতি

উল্লেখ:CSS mask-mode প্রতিভূতি

উল্লেখ:CSS mask-origin প্রতিভূতি

উল্লেখ:CSS mask-position প্রতিভূতি

উল্লেখ:CSS mask-size প্রতিভূতি

উল্লেখ:CSS mask-type প্রতিভূতি

  • পূর্ববর্তী পৃষ্ঠা mask-position
  • পরবর্তী পৃষ্ঠা mask-size