خصائص background-position-x CSS

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

background-position-x إعداد الخصائص لوضع صورة الخلفية على المحور x.

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

مثال

مثال 1

كيفية تحديد موقع صورة الخلفية على المحور x:

div {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: center;
}

جرب بنفسك

مثال 2

كيفية تحديد موقع صورة الخلفية على اليمين:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: right;
}

جرب بنفسك

مثال 3

كيفية استخدام التوضيح بالنسبة المئوية لصورة الخلفية:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: 50%;
}

جرب بنفسك

مثال 4

كيفية استخدام التوضيح بالبكسل لصورة الخلفية:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: 150px;
}

جرب بنفسك

مثال 5

استخدام خصائص الخلفية المختلفة لإنشاء صورة خلفية تغطي وعاءها:

.hero-image {
  background-image: url("photographer.jpg"); /* 使用的图像 */
  background-color: #cccccc; /* إذا لم تكن الصورة متاحة، استخدم هذا اللون */
  height: 300px; /* يجب تعيين الارتفاع */
  background-position-x: center; /* ضع الصورة في منتصف */
  background-repeat: no-repeat; /* لا تكرر الصورة */
  background-size: cover; /* ضع حجم الصورة الخلفية لتغطية الكامل المقبض */
}

جرب بنفسك

جملة CSS

background-position-x: value;

قيمة الخاصية

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

دعم المتصفح

الرقم في الجدول يمثل إصدار المتصفح الذي يدعم الخاصية لأول مرة.

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

دليل:خلفية CSS

مرجع CSS:خصائص background-image

مرجع CSS:خصائص background-position

مرجع CSS:خصائص background-position-y

مرجع HTML DOM:خصائص backgroundPosition