نمط backgroundPosition خاصية
مثال
تغيير موضع صورة الخلفية:
document.body.style.backgroundPosition = "top right";
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
تقوم خاصية backgroundPosition بتعيين أو إرجاع موضع صورة الخلفية داخل عنصر.
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
| Property | |||||
|---|---|---|---|---|---|
| backgroundPosition | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
بناء الجملة
قم بإرجاع خاصية backgroundPosition:
object.style.backgroundPosition
قم بتعيين خاصية backgroundPosition:
object.style.backgroundPosition = value
قيم الملكية
| Value | Description |
|---|---|
| top left top center top right center left center center center right bottom left bottom center bottom right |
If you only specify one keyword, the other value will be "center". |
| x% y% | The x value indicates the horizontal position and the y value indicates the vertical position. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. |
| xpos ypos | The x value indicates the horizontal position and the y value indicates the vertical position. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and units |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
تفاصيل تقنية
| القيمة الافتراضية: | 0٪ 0٪ |
|---|---|
| قيمة الإرجاع: | سلسلة تمثل موضع صورة الخلفية |
| إصدار CSS | CSS1 |
مزيد من الأمثلة
مثال
غيّر موضع صورة الخلفية في عنصر <div> إلى مركز القاع:
document.getElementById("myDiv").style.backgroundPosition = "center bottom";
مثال
غيّر موضع صورة الخلفية في عنصر <div> إلى 200 بكسل أفقيًا و 40 بكسل رأسيًا:
document.getElementById("myDiv").style.backgroundPosition = "200px 40px";
مثال
أعد موضع صورة الخلفية في عنصر <div>:
document.getElementById("myDiv").style.backgroundPosition;
الصفحات ذات الصلة
دروس CSS: خلفية CSS
مرجع CSS: خاصية صورة الخلفية
مرجع CSS: خاصية وضع الخلفية
مرجع DOM HTML: خاصية الخلفية