ویژگی Style background
- صفحه قبلی animationPlayState
- صفحه بعدی backgroundAttachment
- به لایه بالاتر بازگردید اجزای HTML DOM Style
تعریف و کاربرد
background ویژگی‌ها به صورت کوتاه‌ترین شکل ممکن تنظیم یا بازگردانده می‌شوند و می‌توانند حداکثر هشت ویژگی مجزا از پس‌زمینه را تنظیم کنند.
از طریق این ویژگی، شما می‌توانید یک یا چند مورد از موارد زیر را تنظیم یا بازگردانید (در هر ترتیب)
| ویژگی DOM | ویژگی CSS |
|---|---|
| backgroundAttachment | background-attachment |
| backgroundClip | background-clip |
| backgroundColor | background-color |
| backgroundImage | background-image |
| backgroundOrigin | background-origin |
| backgroundPosition | background-position |
| backgroundRepeat | background-repeat |
| backgroundSize | background-size |
این ویژگی‌ها نیز می‌توانند با استفاده از attributeهای جداگانه تنظیم شوند. توصیه می‌شود نویسندگان غیر پیشرفته از attributeهای جداگانه برای به دست آوردن کنترل بهتری استفاده کنند.
لطفاً ببینید:
آموزش CSS3:背景 CSS
آموزش CSS3:پس‌زمینه CSS3
دستورالعمل CSS:attribute background
مثال
تنظیم سبک پس‌زمینه مستند:
document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right top";
در پایین صفحه مثال‌های بیشتری از TIY وجود دارد.
قوانین
attribute background بازمی‌گرداند:
object.style.background
تنظیم attribute background:
object.style.background = "color image repeat attachment position size origin clip|initial|inherit"
مقدار ویژگی
| مقدار | توضیح |
|---|---|
| color | رنگ پس‌زمینه عناصر را تنظیم می‌کند. |
| image | تصویر پس‌زمینه عناصر را تنظیم می‌کند. |
| repeat | روش تکرار تصویر پس‌زمینه را تنظیم می‌کند. |
| attachment | اینکه آیا تصویر پس‌زمینه ثابت است یا با صفحه به همراه می‌رود را تنظیم می‌کند. |
| position | موقعیت شروع تصویر پس‌زمینه را تنظیم می‌کند. |
| size | اندازه تصویر پس‌زمینه را تنظیم می‌کند. |
| origin | ناحیه قرارگیری پس‌زمینه را تنظیم می‌کند. |
| clip | ناحیه‌ای که تصویر پس‌زمینه ترسیم می‌شود را تنظیم می‌کند. |
| ابتدایی | این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. لطفاً به ابتدایی. |
| 继承 | این ویژگی را از عنصر والد خود ارث می‌برد. لطفاً به 继承. |
جزئیات فنی
| مقدار پیش‌فرض: | شفاف هیچ تکرار حرکت 0% 0% خودکار padding-box border-box |
|---|---|
| مقدار بازگشتی: | رشته‌ای که پس‌زمینه عناصر را نشان می‌دهد. |
| نسخه CSS: | CSS1 + ویژگی‌های جدید در CSS3 |
مثال‌های بیشتر
مثال 2
تغییر پس‌زمینه DIV عناصر:
document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";
مثال 3
رنگ پس‌زمینه مستند را تنظیم کنید:
document.body.style.backgroundColor = "red";
مثال 4
تصویر پس‌زمینه مستند را تنظیم کنید:
document.body.style.backgroundImage = "url('img_tree.png')";
مثال 5
تصویر پس‌زمینه را به حالت تکراری تنظیم کنید:
document.body.style.backgroundRepeat = "repeat-y";
مثال 6
تصویر پس‌زمینه را به حالت ثابت (نمی‌چرخد) تنظیم کنید:
document.body.style.backgroundAttachment = "fixed";
مثال 7
موقعیت تصویر پس‌زمینه را تغییر دهید:
document.body.style.backgroundPosition = "top right";
مثال 8
مقدار ویژگی پس‌زمینه مستند را بازگرداند:
document.body.style.background;
پشتیبانی مرورگر
background این یک ویژگی CSS1 (1996) است.
همه مرورگرها این را به طور کامل پشتیبانی می‌کنند:
| Chrome | Edge | Firefox | Safari | Opera | IE |
|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera | IE |
| پشتیبانی | پشتیبانی | پشتیبانی | پشتیبانی | پشتیبانی | پشتیبانی |
نکات
سه ویژگی جدید در CSS3 (1999) اضافه شدند:
- صفحه قبلی animationPlayState
- صفحه بعدی backgroundAttachment
- به لایه بالاتر بازگردید اجزای HTML DOM Style
