پس زمینه عناصر در CSS 3 - خاصیت background-clip
خاصیت background-clip :
از خاصیت background-clip ، در CSS 3 برای تعیین محل و نحوه قرار گیری پس زمینه در
عنصر مورد نظر استفاده می شود . در CSS 2 ، امکان تعیین محل دقیق قرار گیری پس زمینه
در عناصر وجود نداشت ، اما در CSS 3 این امکان در اختیار ما قرار گرفته است .
برای مثال توسط این خاصیت می توان تعیین کرد که پس زمینه عنصر در تمام محدوده آن قرار
گیرد و یا اینکه فقط پشت متن موجود در آن را پوشش دهد .
شکل کلی استفاده از این خاصیت به صورت زیر است :
|
Syntax
|
background-clip : value ;
مثال : background-clip : border-box ;
|
در جدول زیر به تشریح هر یک از حالت های ممکن برای خاصیت background-clip می پردازیم
.
|
توضیح
|
تعیین این پارامتر اجباری است .
این پارامتر تعیین کننده نحوه و مکان قرار گیری پس زمینه عنصر می باشد و می تواند یکی
از 3 حالت زیر را داشته باشد :
- border-box : این خاصیت باعث می شود تا پس زمینه عنصر ، تمام
محدوده عنصر را پوشش دهد .
این مقدار ، مقدار پیش فرض مرورگر است .
- padding-box : در این حالت ، پس زمینه عنصر تمام سطح عنصر را
پوشش داده و فقط مقداری از حاشیه عنصر خالی می ماند .
- content-box : در این حالت ، پس زمینه عنصر فقط پشت محتویات
عنصر را پوشش می دهد . برای مثال اگر عنصر شامل مقداری متن باشد ، پس زمینه فقط پشت
متن را پوشش می دهد .
|
پشتیانی در مرورگر های مختلف :
این خاصیت در تمام نسخه های جدید مرورگرهای مطرح پشتیانی می شود .
مثال های عملی :
در 3 مثال عملی زیر ، هر 3 حالت مختلف این خاصیت را در عمل به شما نمایش می دهیم .
در این مثال ها یک عنصر تگ < div > د اریم که برای آن پس زمینه رنگی تعیین کرده
ایم .
< div style=" background-clip : border-box
; width: 200px ; border: dashed 5px black ; background-color : Silver ; padding:
20px" >
CSS 3 has very intelligent tools for web developers .
some work
that was a thrick before it that CSS 3 comes , now can be done just
with a simple code !
< /div >
|
CSS 3 has very intelligent tools for web developers . some work that
was a thrick before it that CSS 3 comes , now can be done just with a simple code
!
|
< div style=" background-clip : padding-box
; width: 200px ; border: dashed 3px black ; background-color : Silver ; padding:
20px" >
CSS 3 has very intelligent tools for web developers .
some work
that was a thrick before it that CSS 3 comes , now can be done just
with a simple code !
< /div >
|
CSS 3 has very intelligent tools for web developers . some work that
was a thrick before it that CSS 3 comes , now can be done just with a simple code
!
|
< div style=" background-clip : content-box
; width: 200px ; border: dashed 3px black ; background-color : Silver ; padding:
20px" >
CSS 3 has very intelligent tools for web developers .
some work
that was a thrick before it that CSS 3 comes , now can be done just
with a simple code !
< /div >
|
CSS 3 has very intelligent tools for web developers . some work that
was a thrick before it that CSS 3 comes , now can be done just with a simple code
!
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نظر خودتان درباره این صفحه را با ما در میان بگذارید :