خصائص موقف الكمامة لـ CSS

توصية الدورة

التعريف والاستخدام mask-position

يحدد هذا الخصائص موقع الصورة المشكلة (عن طريق منطقة الموقع المشكلة).نصيحة:

بشكل افتراضي، يتم وضع صورة الشاشة في الزاوية العلوية اليسرى للعنصر ويعاد تكرارها في الاتجاهين العمودي والأفقي.

مثال

مثال 1

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: no-repeat;
  ضبط موقع صورة الشاشة في منتصف الموقع:
}

تجربة شخصية

مثال 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%.

القيمة الافتراضية هي: 0% 0%
xpos ypos

القيمة الأولى هي الموقع الأفقي، والقيمة الثانية هي الموقع العمودي.

الركن الأيسر العلوي هو 0 0. ويمكن أن تكون الوحدات بكسل (0px 0px) أو أي وحدة CSS أخرى.

إذا تم تحديد قيمة واحدة فقط، فإن القيمة الأخرى ستكون 50%.

يمكن دمج % والمواقع.
القيمة الافتراضية يرجى الرجوع إلى القيمة الافتراضية.
التوريث يرجى الرجوع إلى التوريث.

تفاصيل التقنية

القيمة الافتراضية: 0% 0%
التوريث: لا
تحريك الفيديو: لا يدعم. انظر:خصائص تحريك.
الإصدار: مستوى 1 لمodule الـ CSS Masking
جافا سكربت الجملة: object.style.maskPosition="100px center"

دعم المتصفح

الرقم في الجدول يعني إصدار المتصفح الذي يدعم الخاصية بشكل كامل.

الخوذة ال边缘 الفاكس السفاري العملة
120 120 53 15.4 106

الصفحات ذات الصلة

دروس:التصنيع CSS

المرجع:خصائص الكمامة لـ CSS

المرجع:خصائص قطع الكمامة لـ CSS

المرجع:خصائص تكوين الكمامة لـ CSS

المرجع:خصائص صورة الكمامة لـ CSS

المرجع:خصائص نمط الكمامة لـ CSS

المرجع:خصائص أصل الكمامة لـ CSS

المرجع:خصائص تكرار الكمامة لـ CSS

المرجع:خصائص حجم الكمامة لـ CSS

المرجع:خصائص نوع الكمامة لـ CSS