تبلیغات متنی و بنر

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

خاصیت background-origin :

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

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

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

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

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

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

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

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

حالت 1 - border-box
< div style=" background-origin : border-box ; width: 200px ; border: dashed 5px black ; padding: 20px ; background-repeat: no-repeat ; background-image: url(../Pic/ADS/css.png)" >
    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-origin : padding-box ; width: 200px ; border: dashed 3px black ; padding: 20px ; background-repeat: no-repeat ; background-image: url(../Pic/ADS/css.png)" >
    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 !

خروجی

../Pic/ADS/css.png
حالت 3 - content-box
< div style=" background-origin : content-box ; width: 200px ; border: dashed 3px black ; padding: 20px ; background-repeat: no-repeat ; background-image: url(../Pic/ADS/css.png)" >
    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 :  

نظر شما :  

سوال امنیتی : پایتخت ایران ؟