این آموزش در تاریخ ۱۴۰۰/۱۰/۲۷ آپدیت شده است.
آموزش ویژگی background-repeat در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی background-repeat در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی background-repeat در CSS
با استفاده از ویژگی background-repeat در CSS میتوان تنظیم کرد که آیا تصویر زمینه بصورت افقی یا عمودی تکرار شود یا خیر اصلا تکرار نشود.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی background-repeat را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : در حالت عادی اگر از این ویژگی استفاده نشود، تصویر بصورت افقی عمودی کاشی وار تکرار می شود
|
1 2 3 |
body { background-image:url("files/girls-2.png"); } |
مثال شماره ۲ : تکرار فقط بصورت افقی
|
1 2 3 |
body { background-repeat: repeat-x; } |
مثال شماره ۳ : تکرار فقط بصورت عمودی
|
1 2 3 |
body { background-repeat: repeat-y; } |
مثال شماره ۴ : تصویر زمینه تکرار نشود
|
1 2 3 |
body { background-repeat:no-repeat; } |
Free-Learn
جدول مشخصات ویژگی background-repeat در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | repeat |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | ندارد | اطلاعات بیشتر |
| نسخه | CSS1 |
| نحوه استفاده در جاوااسکریپت | object.style.backgroundRepeat=”repeat-x”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی background-repeat در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| 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 موقعیت قرار گیری تصویر زمینه را مشخص نکرده باشید، بصورت پیش فرض تصویر از بالا گوشه سمت چپ شروع می شود.
