CSS mask-position অপার্টা

  • পূর্ববর্তী পৃষ্ঠা mask-origin
  • পরবর্তী পৃষ্ঠা mask-repeat

সংজ্ঞা ও ব্যবহার

mask-position এই বৈশিষ্ট্যটি হিডজ চিত্রের ভাবমূলক অবস্থানকে নির্দেশ করে (হিডজ অবস্থান অঞ্চলের অংশ হিসাবে)

সূচনা:ডিফল্টভাবে, হিডজ চিত্রটি ইউনিটের ডানদিকের উপরের কোণে স্থাপন করা হয় এবং উপর ও নীচের দিকে পুনরাবৃত্তি করা হয়。

প্রকল্প

উদাহরণ 1

হিডজ লেয়ার চিত্রের অবস্থানকে মধ্যে সেট করুন:

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

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

উদাহরণ 2

হিডজ লেয়ার চিত্রের অবস্থানকে ডানদিকের নিচের কোণে সেট করুন:

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

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

CSS গঠনশৈলী

mask-position: value;

বৈশিষ্ট্য মান

মান বর্ণনা
  • left top
  • left center
  • left bottom
  • right top
  • right center
  • right bottom
  • center top
  • center center
  • center bottom
 যদি শুধুমাত্র একটি শব্দ নির্দিষ্ট করা হয়, তবে আরেকটি মান "center" হবে。
x% y%

প্রথম মানটি অনুপ্রস্থ অবস্থান, দ্বিতীয়টি হল ভিক্টরিক অবস্থান

ডানদিকের উপরের কোণ 0% 0%। ডানদিকের নিচের কোণ 100% 100%।

যদি শুধুমাত্র একটি মান নির্দিষ্ট করা হয়, তবে আরেকটি মান 50% হবে。

ডিফল্ট মান:
xpos ypos

প্রথম মানটি অনুপ্রস্থ অবস্থান, দ্বিতীয়টি হল ভিক্টরিক অবস্থান

ডানদিকের উপরের কোণ 0 0। ইউনিট পিক্সেল (0px 0px) বা অন্য কোনও CSS ইউনিট হতে পারে。

যদি শুধুমাত্র একটি মান নির্দিষ্ট করা হয়, তবে আরেকটি মান 50% হবে。

প্রতিরূপ করা যেতে পারে % এবং অবস্থান
initial এই বৈশিষ্ট্যটিকে তার ডিফল্ট মানে ন্যায়িত্ব করুন। দেখুন initial。
inherit এই বৈশিষ্ট্যটি তার পিতৃত্ব ইউনিট থেকে উত্তরাধিকার নেয়। দেখুন inherit。

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

ডিফল্ট মান: 0% 0%
পুনর্বিন্যসনকারীতা: না
অ্যানিমেশন নির্মাণ: সমর্থন নয়। দেখুন:অ্যানিমেশন-সংক্রান্ত বৈশিষ্ট্য。
সংস্করণ: CSS মাস্কিং মডিউল লেভেল 1
জেভাস্ক্রিপ্ট গঠনশৈলী: object.style.maskPosition="100px center"

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

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

চ্রোম এজ ফায়ারফক্স সাফারি অপেরা
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-repeat অপার্টা

উল্লেখ:CSS mask-size অপার্টা

উল্লেখ:CSS mask-type অপার্টা

  • পূর্ববর্তী পৃষ্ঠা mask-origin
  • পরবর্তী পৃষ্ঠা mask-repeat