ویژگی background در CSS بخش سوم صفت background-clip

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

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

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

ویژگی background در CSS بخش سوم صفت background-clip - سایت آموزی

در بخش سوم این سری آموزشی در مورد دو ویژگی دیگر از زیرمجموعه های 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 در سی اس اس

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

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

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

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

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

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

پیوندهای مهم و کاربردی

تگ های HTML در سایت آموزی

تگ های جدید HTML5 در سایت آموزی

صفات تگ های HTML در سایت آموزی

تگ های منسوخ شده HTML5 در سایت آموزی

تگ های block level و inline level در سایت آموزی

تگ های HTML در W3school

ویژگی های CSS در سایت آموزی

ویژگی های CSS در W3schools

ویژگی background در CSS بخش سوم صفت background-clip – اختصاصی سایت آموزی