درس پیشنهاد:
- پیشین پیچ backgroundImage
- پائیدھا پائیدھا backgroundRepeat
- ایک سطر اوپر واپس ایچ تی ایم ال ڈوم اسٹائل آوبجیکٹ
استایل پس منظر پارا میٹر
backgroundPosition پارا میٹر کا تعریف اور استعمال
دوسری مراجع بھی دیکھئے:
HTML نمونه:background کا پارا میٹر
CSS درس:CSS پسزمینه
CSS3 درس:CSS3 پس منظر
CSS مرجع دستور زبان:background-image کا پارا میٹر
CSS مرجع دستور زبان:background-position کا پارا میٹر
مثال
مثال 1
پس منظر تصویر کی پوزیشن کو بدل دیں:
document.body.style.backgroundPosition = "top right";
مثال 2
ترجیح دیویڈ <div> کا پس منظر تصویر کی پوزیشن پائین وسط میسر کریں:
document.getElementById("myDiv").style.backgroundPosition = "center bottom";
مثال 3
موقعیت تصویر پسزمینه <div> عناصر به 200 پیکسل افقی و 40 پیکسل عمودی تغییر میکند:
document.getElementById("myDiv").style.backgroundPosition = "200px 40px";
مثال 4
موقعیت تصویر پسزمینه <div> عناصر بازگردانده میشود:
document.getElementById("myDiv").style.backgroundPosition;
نحوه نوشتن
بازگشتی backgroundPosition ویژگی:
object.style.backgroundPosition
تنظیم ویژگی backgroundPosition:
object.style.backgroundPosition = value
مقدار ویژگی
| مقدار | توضیح |
|---|---|
|
اگر شما فقط یک کلمه کلیدی مشخص کنید، مقدار دیگر "center" خواهد بود. |
| x% y% |
مقدار x نشاندهنده موقعیت افقی است و مقدار y نشاندهنده موقعیت عمودی است. بالای سمت چپ 0% 0% است. پایین سمت راست 100% 100% است. اگر شما فقط یک مقدار را مشخص کنید، مقدار دیگر 50% خواهد بود. |
| xpos ypos |
مقدار x نشاندهنده موقعیت افقی است و مقدار y نشاندهنده موقعیت عمودی است. بالای سمت چپ 0 0 است. واحدها میتواند پیکسل (0px 0px) یا هر واحد CSS دیگر باشد. اگر شما فقط یک مقدار را مشخص کنید، مقدار دیگر 50% خواهد بود. شما میتوانید از % و واحدها به صورت ترکیبی استفاده کنید. |
| initial | این ویژگی را به مقدار پیشفرض خود تنظیم کنید. لطفاً به initial. |
| inherit | این ویژگی را از عنصر والد خود ارث میبرد. لطفاً به inherit. |
جزئیات فنی
| مقدار پیشفرض: | 0% 0% |
|---|---|
| مقدار بازگشتی: | یک رشته است که موقعیت تصویر پسزمینه را نشان میدهد. |
| نسخه CSS: | CSS1 |
پشتیبانی مرورگر
backgroundPosition این یک ویژگی CSS1 (1996) است.
همه مرورگرها این را به طور کامل پشتیبانی میکنند:
| کروم | ایج | فایرفاکس | سافاری | آپرا | IE |
|---|---|---|---|---|---|
| کروم | ایج | فایرفاکس | سافاری | آپرا | IE |
| پشتیبانی میکند | پشتیبانی میکند | پشتیبانی میکند | پشتیبانی میکند | پشتیبانی میکند | پشتیبانی میکند |
- پیشین پیچ backgroundImage
- پائیدھا پائیدھا backgroundRepeat
- ایک سطر اوپر واپس ایچ تی ایم ال ڈوم اسٹائل آوبجیکٹ
