این آموزش در تاریخ ۱۳۹۹/۰۱/۲۱ آپدیت شده است.
آموزش ویژگی background-repeat در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی background-repeat در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی background-repeat در CSS
با استفاده از ویژگی background-repeat در CSS میتوان تنظیم کرد که تصویر زمینه بصورت افقی یا عمودی تکرار شود، و یا اینکه اصلا تکرار نشود.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی background-repeat را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : در حالت عادی اگر از این ویژگی استفاده نشود، تصویر هم بصورت افقی و هم عمودی تکرار می شود
|
1 2 3 4 5 6 7 |
<style> body{ background-image:url('bg6.png'); } </style> |
مثال شماره ۲ : تکرار فقط بصورت افقی
|
1 2 3 4 5 6 7 |
<style> body{ background-repeat:repeat-x; } </style> |
مثال شماره ۳ : تکرار فقط بصورت عمودی
|
1 2 3 4 5 6 7 |
<style> body{ background-repeat:repeat-y; } </style> |
مثال شماره ۴ : تصویر زمینه تکرار نشود
|
1 2 3 4 5 6 7 |
<style> body{ background-repeat:no-repeat; } </style> |
Free-Learn
جدول مشخصات ویژگی background-repeat در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | repeat |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | ندارد | اطلاعات بیشتر |
| نسخه | CSS1 |
| نحوه استفاده در جاوااسکریپت | object.style.backgroundRepeat=”repeat-x”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی background-repeat در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | IE |
| background-repeat | ۱٫۰ | ۱٫۰ | ۳٫۵ | ۱٫۰ | ۴٫۰ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی background-repeat در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| repeat | پیش فرض – تصویر زمینه بصورت افقی و عمودی تکرار میشود. |
| repeat-x | تصویر زمینه فقط بصورت افقی تکرار میشود. |
| repeat-y | تصویر زمینه فقط بصورت عمودی تکرار میشود. |
| no-repeat | تصویر زمینه تکرار نمیشود. |
| space | یک فضای خالی (سفید) بصورت مساوی بین تکه های تصویر ایجاد میشود. |
| round | برخلاف مقدار بالا، تصویر تاجایی کشیده میشود که فضای خالی را پُر یا حذف کند. |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
اگر با استفاده از ویژگی background-position موقعیت قرار گیری تصویر زمینه را مشخص نکرده باشید، بصورت پیش فرض تصویر از بالا گوشه سمت چپ شروع می شود.
