آموزش برنامه نویسی ، پایگاه داده sql server
آموزشگاه برنامه نویسی تحلیل داده : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server


آموزشگاه برنامه نویسی مجتمع فنی تهران میرداماد : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server

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

خاصیت background-size :

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

Syntax background-size : value ;
مثال : background-size : 30px ;

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

syntax توضیح هر یک از موارد
توضیح پارامتر
تعیین این پارامتر اجباری است .
این پارامتر تعیین کننده اندازه عکس پس زمینه برای عنصر است و می تواند به یکی از 4 روش زیر مقدار دهی شود :
  1. length : در این حالت اندازه ارتفاع و عرض عکس پس زمینه بر اساس واحدی مثل px تعیین می شود .
    اگر یک عدد مثل 30px تعیین شود ، اندازه ارتفاع و عرض عکس پس زمینه هر دو ، مقدار 30px را خواهند داشت . اما می توان 2 عدد پشت سر هم را نیز تعیین کرد، که در این حالت عدد اول تعیین کننده ارتفاع و عدد دوم تعیین کننده عرض عکس خواهد بود .
  2. % : در این حالت اندازه ارتفاع و عرض عکس پس زمینه بر اساس درصد % نسبت به اندازه واقعی عکس ، تعیین خواهد شد .
    اگر یک عدد مثل %30 تعیین شود ، اندازه ارتفاع و عرض عکس پس زمینه هر دو ، مقدار %30 اندازه واقعی عکس را خواهند داشت . اما می توان 2 عدد پشت سر هم را نیز تعیین کرد، که در این حالت عدد اول تعیین کننده ارتفاع و عدد دوم تعیین کننده عرض عکس خواهد بود .
  3. cover : در این حالت ، عکس پس زمینه به اندازه محتویات درون عنصر کوچک خواهد شد ، تا ارتفاع وعرض آن اندازه عنصر شود .
  4. contain : در این حالت ، عکس پس زمینه به اندازه محتویات درون عنصر بزرگ خواهد شد ، تا ارتفاع وعرض آن اندازه عنصر شود .
value


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

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


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

در 4 مثال عملی زیر ، هر 4 حالت مختلف این خاصیت را در عمل به شما نمایش می دهیم .
در این مثال ها یک عنصر تگ < div > د اریم که برای آن یک عکس را به عنوان پس زمینه تعیین کرده ایم . دقت کنید که در 2 حالت اول و دوم به ترتیب اندازه عکس پس زمینه را بر اساس واحد های px و درصد % تعیین کرده ایم . در حالت سوم عکس برای اینکه هم اندازه محتویات عنصر شود ، خود را کوچک کرده و در حالت چهارم نیز عکس برای هم اندازه شدن با محتویات عنصر خود را بزرگ کرده است .

حالت 1 - اندازه بر حسب پیکسل px
< div style=" background-size: 90px 100px ; 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 - اندازه بر حسب درصد %
< div style=" background-size: 110% ; 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 - حالت cover
< div style=" background-size: cover ; 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
حالت 4 - حالت contain
< div style=" background-size: contain ; 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 :    
 
نظر شما :  
 
سوال امنیتی : پایتخت ایران ؟