ویژگی background-clip در css

در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد ویژگی background-clip در css توضیحاتی را ارائه نماییم.

ویژگی کاربردی background-clip در زبان css در آخرین نسخه این زبان طراحی یعنی CSS3 معرفی شده است.

معرفی و کاربرد ویژگی جدید background-clip در زبان طراحی css

توسط خاصیت background-clip می توانیم تعیین کنیم که پس زمینه تگ html در کدام ناحیه و یا ناحیه ها قرار بگیرد. هر تگ html از لحاظ مدل قسمت بندی دارای چهار ناحیه است.

که این نواحی عبارتند از:

1. ناحیه محتوا (content-box)
2. ناحیه فاصله داخلی (padding-box)
3. ناحیه حاشیه (border-box)
4. ناحیه فاصله خارجی یا (margin-box)

نکته مهم

در حالت پیش فرض ، پس زمینه یک تگ html ، نواحی محتوا ( content-box ) , فاصله داخلی ( padding-box ) و حاشیه ( border-box ) را در بر می گیرد.

اما شما با استفاده از ویژگی کاربردی background-clip می توان این رفتار را تغییر دهید. و پس زمینه را به ناحیه دلخواه خودتان محدود نمایید و در اصطلاح پس زمینه را در ناحیه مورد نظر خود برش (clip) دهید.

مقادیر صفت جدید background-clip در زبان طراحی سی اس اس

صفت جدید background-clip که در زبان طراحی CSS3 معرفی شده است، 5 مقدار می پذیرد که عبارتند از:

1. مقدار border-box
2. مقدار padding-box
3. مقدار content-box
4. مقدار initial
5. مقدار inherit

مقدار border-box درون خاصیت background-clip در زبان css

اگر ویژگی background-clip را برابر با مقدار b.order-box قرار دهیم، حالت پیش فرض پس زمینه تگ html در این ویژگی رخ می دهد. در این حالت پس زمینه تا بخش border یا حاشیه تگ html ترسیم می شود. و محدوده امتداد ترسیم آن بخش content و padding و border عنصر است.

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

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

اگر خاصیت background-clip را برابر با یک مقدار padding-box قرار دهیم، در این حالت پس زمینه تا بخش حاشیه داخلی تگ html یا بخش padding عنصر ترسیم می شود.

در این حالت پس زمینه در بخش border تگ html امتداد نمی یابد. و محدوده امتداد ترسیم آن بخش content و padding عنصر است.

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

مقدار content-box درون خاصیت background-clip در زبان css

اگر خاصیت background-clip را برابر با یک مقدار content-box قرار دهیم، در این حالت پس زمینه تا بخش محتوای تگ html یا بخش content عنصر ترسیم می شود.

در این حالت پس زمینه در بخش های padding و border تگ html امتداد نمی یابد. و محدوده امتداد ترسیم آن تنها در ناحیه content یا محتوای عنصر است.

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

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

اگر خاصیت background-clip رابرابر با مقدار initial تعریف کنیم، در حقیقت همان مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.

مقدار inherit درون خاصیت background-clip در زبان css

اگر خاصیت background-clip را برابر با مقدار inherit تعریف کنیم، در واقع تگ html مربوطه ، خصوصیت مذکور را از والد پدری خود به ارث می برد.

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

برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

مثال در مورد ویژگی background-clip در css

div{background-clip:border-box;}

بررسی خاصیت background-clip از نظر نسخه زبان طراحی سی اس اس

ویژگی کاربردی background-clipدر زبان css در آخرین نسخه این زبان طراحی یعنی CSS3 معرفی شده است.

بررسی ساختاری خصوصیت background-clip

پشتیبانی مرورگرهای اینترنتی از ویژگی background-clip در css

خاصیت css
background-clip	4.0	9.0	4.0	3.0	10.5

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

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

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

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

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

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

تگ های HTML در W3school

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

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

ویژگی background-clip در css تعیین ناحیه پس زمینه – اختصاصی سایت آموزی