جستجو برای:
سبد خرید 0
  • آی آر پروگرم
  • آموزش ها
    • آموزش های ویدئویی
    • آموزش های متنی
  • بلاگ
  • چارت آموزشی آی آر
  • ابزار های برنامه نویسی
  • پادکست ها
  • بانک کد
 

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت
  • 09306889067
  • info@irprogram.com
perm_identity
سبد خرید 0
  • تماس با ما
  • داستان آی آر
  • پشتیبانی
  • پرسش و پاسخ
0
آموزش برنامه نویسی
ورود و ثبت نام
دسته بندی دوره ها
  • آموزش های برنامه نویسی موبایل
    • آموزش طراحی اینستاگرام با React Native
    • آموزش مقدماتی react native
    • آموزش اکما اسکریپت
    • دوره آموزش phonegap
    • آموزش custom dialog در اندروید
    • آموزش استفاده از کتابخانه glide در اندروید
    • آموزش اندروید کرکینگ ۲۰۱۹
    • آموزش استفاده از کتابخانه tasty toast در اندروید
    • دوره آموزش JQuery Mobile
    • دوره جامع آموزش زامارین اندروید
    • آموزش استفاده از کتابخانه Picasso در اندروید
    • آموزش استفاده از کتابخانه Circle ImageView در اندروید
    • آموزش استفاده از کتابخانه Material Text Field در اندروید
    • آموزش استفاده از کتابخانه Photo View در اندروید
    • آموزش استفاده کتابخانه Progress Whell در اندروید
    • آموزش react native
    • آموزش اندروید
  • آموزش های برنامه نویسی وب
    • آموزش پروژه محور html
    • دوره آموزش css
    • آموزش پروژه محور جاوا اسکریپت
    • آموزش پروژه محور جی کوئری
    • آموزش های طراحی سایت
    • آموزش های وردپرس
    • آموزش طراحی صفحات وب
    • آموزش css
    • آموزش html
    • آموزش های وردپرس
    • آموزش افزونه های وردپرس
    • آموزش افزونه yoast
  • آموزش های صد روز تا دولوپری
    • آموزش html
    • آموزش css
    • آموزش phonegap
    • آموزش جی کوئری
    • آموزش جی کوئری موبایل
    • آموزش جاوا اسکریپت
  • آموزش های رایگان
    • همه آموزش های رایگان
  • همه دوره های کسب و کار و درآمد دیجیتالی (بیت کوین و بازار فارکس)
    • بازار فارکس
    • بازار فارکس ۲
    • بیت کوین و بلاک چین
    • خلق مدل کسب و کار
  • آی آر پروگرم
  • آموزش ها
    • آموزش های ویدئویی
    • آموزش های متنی
  • بلاگ
  • چارت آموزشی آی آر
  • ابزار های برنامه نویسی
  • پادکست ها
  • بانک کد

وبلاگ

آموزش برنامه نویسی > بلاگ > آموزش طراحی صفحات وب > آموزش css > ویژگی background-repeat در CSS

ویژگی background-repeat در CSS

access_time۱۰ آذر ۱۳۹۸
perm_identity ارسال شده توسط irprogramadmin
folder_open آموزش css ، آموزش html ، آموزش برنامه نویسی ، آموزش طراحی صفحات وب ، مرجع برنامه نویسی
visibility 31 بازدید

ویژگی background-repeat در CSS

اگر شما یک عکس در صفحه وب خودتون داشته باشین ب استفاده از ویژگی background-repeat میتونین برای عکس تعیین کنین که اون عکس تکرار بشه یا نه و اینکه چجوری تکرار بشه .

می توان فقط پس زمینه را در جهت افقی تکرار کرد:

۱
۲
۳
divclass {
  background-repeat: repeat-x;
}

و یا فقط در جهت عمودی:

۱
۲
۳
divclass {
  background-repeat: repeat-y; /* = no-repeat repeat; */
}

همینطور در خیلی از مواقع نیاز است تا از رفتار پیشفرض که تکرار در هر دو جهت است جلوگیری کنیم و مانع تکرار شویم. برای این کار کافی است از مقدار no-repeat استفاده کنیم:

۱
۲
۳
divclass {
  background-repeat: no-repeat;
}

حال فرض کنید برای یک عنصر دو و یا چند تصویر پس زمینه تعریف کرده ایم. و می خواهیم یکی از آنها تکرار شود و دیگری فقط در راستای افقی تکرار شود.

برای این کار می توان مقادیر تکرار مربوط به هر پس زمینه را توسط ویرگول از دیگر مقادیر جدا کرد:

۱
۲
۳
div {
  background-repeat: repeat, repeat-x;
}

توجه کنید که باید مقادیر را به ترتیب بنویسید که هر کدام برای پس زمینه مورد نظرتان اعمال شوند.

این ویژگی دو کلمه کلیدی دیگر هم می پذیرد.

همانطور که گفته شد با توجه به اندازه عنصر و اندازه تصویر پس زمینه امکان اینکه تکه هایی از تکرار در کناره های عنصر بصورت ناقص و بریده شده نشان داده شوند وجود دارد. دو مقدار برای این ویژگی وجود دارند که می توانند از این اتفاق جلوگیری کنند:

بیشتر بخوانید  زبان های برنامه نویسی تحت ویندوز

۱-space

این مقدار باعث می شوند تا تصویر به تعدادی که در عنصر جا می شود تکرار شود و فضاهای خالی باقی مانده بین تکرارها بصورت مساوی تقسیم می شود.

از این مقدار نیز می توان برای هر دو جهت استفاده کرد و هم می توان فقط برای یک جهت آن را اعمال کرد. به عنوان نمونه:

۱
۲
۳
۴
div {
  background-repeat: space; /* برای هر دو جهت */
  background-repeat: space repeat; /* فقط جهت افقی */
}

۲-round

این مقدار باعث می شود که تصویر با توجه به اندازه اش تا جایی که فضا هست تکرار شود و اگر فضایی باقی ماند تکرارها کشیده می شوند (در جهتی که مشخص شده است) تا اینکه فضاهای خالی پر شوند:

۱
۲
۳
۴
۵
div {
  background-repeat: round; /* برای هر دو جهت */
  background-repeat: round repeat; /* فقط جهت افقی */
  background-repeat: no-repeat round; /* فقط جهت عمودی */
}

 

اشتراک گذاری:
مطالب زیر را حتما بخوانید
  •  گذاشتن افکت برای هاور تصاویر

    2 بازدید

  • ساخت گرادیانت رنگین کمانی متحرک

    6 بازدید

  • انتشار اپلیکیشن اندروید React Native در گوگل پلی استور

    10 بازدید

  • ساخت دکمه Volume با HTML و CSS

    12 بازدید

  • طراحی رادار با HTML و CSS

    14 بازدید

جدید تر توسعه دهندگان جاوا چه زمانی میتوانند از ویژوال استودیو کد استفاده کنن؟
قدیمی تر ویژگی background-color در CSS

پاسخی بگذارید لغو پاسخ

جستجو
جستجو برای:
مطالب بلاگ آی آر
  • Uncategorized (۵)
  • آموزش PHP (۱۰)
  • آموزش react native (۴۹)
  • آموزش اندروید (۱۳)
  • آموزش ایلاستریتور (۴۹)
  • آموزش برنامه نویسی (۲۰۱)
  • آموزش خرید از وبسایت های خارجی (۱۶)
  • آموزش طراحی صفحات وب (۸۲)
    • آموزش css (۳۹)
    • آموزش html (۴۵)
  • آموزش های فتوشاپ (۶۶)
  • آموزش های وردپرس (۵۳)
    • آموزش افزونه های وردپرس (۳۲)
      • آموزش افزونه yoast (۱۳)
  • ابزار های برنامه نویسی (۵۵)
  • استارتاپ و کسب و کار (۱۵۹)
  • انگیزشی (۴۰)
  • بانک کد (۴۶)
  • پادکست (۲)
  • دسته‌بندی نشده (۳)
  • کسب و کار آنلاین (۱۲)
  • مرجع برنامه نویسی (۴)
  • مطالب متفرقه (۵۶)
  • معرفی ایده (۴)
  • معرفی زبان های برنامه نویسی (۴)
  • معرفی کتاب (۵)
  • معرفی ویرایشگرها (۱)
  • مقایسه (۴)
جدیدترین مطالب بلاگ آی آر
  •  گذاشتن افکت برای هاور تصاویر ۱۰ آذر ۱۳۹۸
  • چرا اینقدر بیکار داریم ؟ ۱۰ آذر ۱۳۹۸
  • ساخت گرادیانت رنگین کمانی متحرک ۱۰ آذر ۱۳۹۸
  • انتشار اپلیکیشن اندروید React Native در گوگل پلی استور ۱۰ آذر ۱۳۹۸
  • ساخت دکمه Volume با HTML و CSS ۱۰ آذر ۱۳۹۸
دوره های آموزشی آی آر
  • تحلیل تکنیکال بازارهای بورس ، فارکس و ارزهای دیجیتال( چهارمین دوره از مجموعه صد روز تا درآمد دیجیتالی)
  • آموزش طراحی اینستاگرام با React Native
  • بازار فارکس2- فارکس مقدماتی( سومین دوره از مجموعه صد روز تا درآمد دیجیتالی)
  • بیت کوین و بلاک چین (اولین دوره از مجموعه صد روز تا درآمد دیجیتالی)
  • بازار فارکس (دومین دوره از مجموعه صد روز تا درآمد دیجیتالی)
  • خلق مدل کسب و کار (اولین دوره از مجموعه کسب و کار نوین)
  • دوره جامع آموزش زامارین اندروید
    دوره جامع آموزش زامارین اندروید
  • دوره آموزش phonegap (دوره ششم از آموزش صد روز تا دولوپری)
تماس با ما
  • location_on
    استان خراسان جنوبی پارک علم و فناوری اتاق 111
  • phone_android
    09306889067
  • email
    info@irprogram.com
دسته بندی دوره های آی آر
  • برنامه نویسی موبایل
  • برنامه نویسی وب
  • آموزش های رایگان
  • آموزش بیت کوین
  • آموزش وردپرس
  • آموزش طراحی سایت
درباره آی آر پروگرم

آی آر پروگرم یه وب سایت آموزش آنلاین نیست ! بلکه وب سایتیه که شما با آموزش های اون میتونین آینده خودتون رو بسازین .

آموزش های آی آر پروگرم در حوزه های برنامه نویسی وب ، برنامه نویسی موبایل ، برنامه نویسی ویندوز و کسب درآمد دیجیتال و راه اندازی کسب و کار هستند .

ما آی آر پروگمی ها میخوایم با آموزش برنامه نویسی به بهتر و راحت تر کردن زمین برای زندگی کمک کنیم .

نماد های اعتماد ما
تمامی حقوق مادی و معنوی وب سایت irprogram برای شرکت فرزان فناوران پویان محفوظ است .
keyboard_arrow_up