ویژگی background در CSS بخش سوم

ویژگی background در CSS بخش سوم | content-box | مقدار border-box

ویژگی background در CSS بخش سوم را برای مطالعه شما همراهان گرامی سایت آموزی تدارک دیدیم.

در بخش دوم با دو ویژگی background-position و background-attachment در CSS آشنا شدید.

ویژگی background در CSS بخش سوم

ویژگی background در CSS بخش سوم | content-box | مقدار border-box

ویژگی background در CSS بخش سوم | content-box | مقدار border-box

در بخش سوم این سری آموزشی در مورد دو ویژگی دیگر از زیرمجموعه های background در css توضیح می دهیم.

برای بخش سوم ویژگی های background-clip و  background-origin را مورد بررسی قرار می دهیم.

ویژگی background-clip در css

این ویژگی تعیین می کند که پس زمینه عنصر مورد نظر شما در کدام ناحیه ترسیم می شود.

این پس زمینه می تواند در سه ناحیه ترسیم شود که در ادامه این نواحی را توضیح می دهیم.

مقادیر ویژگی background-clip

  1. content-box
  2. padding-box
  3. border-box

1- مقدار content-box در ویژگی background-clip

همه عناصر پس زمینه در قسمت content خود اعمال می کنند.

در صورت انتخاب مقدار پیش فرض content-box پس زمینه در ناحیه محتوای عنصر نمایش داده می شود.

۲- مقدار padding-box در ویژگی background-clip

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

مقدار padding-box قانون پیش فرض ناحیه بندی پس زمینه در محتوا را می شکند.

و با استفاده از این مقدار پس زمینه مورد نظر بخش content و padding را با هم به خود اختصاص می دهد.

۳- مقدار border-box در ویژگی background-clip

یک مقدار که به صورت پیش فرض پس زمینه را در ناحیه border-box قرار می دهد موجود است.

ویژگی background-origin در css

این ویژگی ( background-origin ) تعیین می کند که شروع ترسیم پس زمینه عنصر در کدام ناحیه باشد.

این ویژگی نیز دارای ۳ مقدار می شود: 

  1. content-box
  2. padding-box
  3. border-box

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

ویژگی background در CSS بخش اول

ویژگی background در CSS بخش دوم

ویژگی background در CSS بخش سوم | content-box | مقدار border-box – اختصاصی سایت آموزی

توسط | ۱۳۹۷/۵/۲ ،۰۲:۲۱:۵۱ +۰۰:۰۰ مرداد ۲ام, ۱۳۹۷|css دسته بندی ها|برچسب ها: , , , , |بدون دیدگاه

در باره نویسنده :

ثبت ديدگاه

هجده − 4 =