پس زمینه عناصر در CSS 3 - خاصیت background-clip

خاصیت background-clip :

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

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

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

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


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

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


مثال های عملی :

در 3 مثال عملی زیر ، هر 3 حالت مختلف این خاصیت را در عمل به شما نمایش می دهیم .
در این مثال ها یک عنصر تگ < div > د اریم که برای آن پس زمینه رنگی تعیین کرده ایم .

حالت 1 - border-box
< 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 !

خروجی

حالت 2 - padding-box
< 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 !

خروجی

حالت 3 - content-box
< 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 !

خروجی


راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نظر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : پایتخت ایران ؟