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

خاصیت background-clip :

از خاصیت background-clip ، در CSS 3 برای تعیین محل و نحوه قرار گیری پس زمینه در عنصر مورد نظر استفاده می شود . در CSS 2 ، امکان تعیین محل دقیق قرار گیری پس زمینه در عناصر وجود نداشت ، اما در CSS 3 این امکان در اختیار ما قرار گرفته است .
برای مثال توسط این خاصیت می توان تعیین کرد که پس زمینه عنصر در تمام محدوده آن قرار گیرد و یا اینکه فقط پشت متن موجود در آن را پوشش دهد .

شکل کلی استفاده از این خاصیت به صورت زیر است :

; Syntax: background-clip : value 
;  background-clip : border-box: مثال 

زیر به تشریح هر یک از حالت های ممکن برای خاصیت background-clip می پردازیم .

توضیح هر یک از موارد syntax :

value:
تعیین این پارامتر اجباری است .
این پارامتر تعیین کننده نحوه و مکان قرار گیری پس زمینه عنصر می باشد و می تواند یکی از ۳ حالت زیر را داشته باشد :
border-box : این خاصیت باعث می شود تا پس زمینه عنصر ، تمام محدوده عنصر را پوشش دهد .
این مقدار ، مقدار پیش فرض مرورگر است .
padding-box : در این حالت ، پس زمینه عنصر تمام سطح عنصر را پوشش داده و فقط مقداری از حاشیه عنصر خالی می ماند .
content-box : در این حالت ، پس زمینه عنصر فقط پشت محتویات عنصر را پوشش می دهد . برای مثال اگر عنصر شامل مقداری متن باشد ، پس زمینه فقط پشت متن را پوشش می دهد .

پشتیانی در مرورگر های مختلف :

این خاصیت در تمام نسخه های جدید مرورگرهای مطرح پشتیانی می شود .