پس زمینه عناصر در 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 می پردازیم
.
|
توضیح
|
تعیین این پارامتر اجباری است .
این پارامتر تعیین کننده اندازه عکس پس زمینه برای عنصر است و می تواند به یکی از 4
روش زیر مقدار دهی شود :
- length : در این حالت اندازه ارتفاع و عرض عکس پس زمینه بر
اساس واحدی مثل px تعیین می شود .
اگر یک عدد مثل 30px تعیین شود ، اندازه ارتفاع و عرض عکس پس زمینه هر دو ، مقدار 30px
را خواهند داشت . اما می توان 2 عدد پشت سر هم را نیز تعیین کرد، که در این حالت عدد
اول تعیین کننده ارتفاع و عدد دوم تعیین کننده عرض عکس خواهد بود .
- % : در این حالت اندازه ارتفاع و عرض عکس پس زمینه بر اساس
درصد % نسبت به اندازه واقعی عکس ، تعیین خواهد شد .
اگر یک عدد مثل %30 تعیین شود ، اندازه ارتفاع و عرض عکس پس زمینه هر دو ، مقدار %30
اندازه واقعی عکس را خواهند داشت . اما می توان 2 عدد پشت سر هم را نیز تعیین کرد،
که در این حالت عدد اول تعیین کننده ارتفاع و عدد دوم تعیین کننده عرض عکس خواهد بود
.
- cover : در این حالت ، عکس پس زمینه به اندازه محتویات درون
عنصر کوچک خواهد شد ، تا ارتفاع وعرض آن اندازه عنصر شود .
- contain : در این حالت ، عکس پس زمینه به اندازه محتویات درون
عنصر بزرگ خواهد شد ، تا ارتفاع وعرض آن اندازه عنصر شود .
|
پشتیانی در مرورگر های مختلف :
این خاصیت در تمام نسخه های جدید مرورگرهای مطرح پشتیانی می شود .
مثال های عملی :
در 4 مثال عملی زیر ، هر 4 حالت مختلف این خاصیت را در عمل به شما نمایش می دهیم .
در این مثال ها یک عنصر تگ < div > د اریم که برای آن یک عکس را به عنوان پس
زمینه تعیین کرده ایم . دقت کنید که در 2 حالت اول و دوم به ترتیب اندازه عکس پس زمینه
را بر اساس واحد های 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
!
|
اندازه واقعی عکس به کار رفته
|
|
< 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
!
|
اندازه واقعی عکس به کار رفته
|
|
< 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 >
|
../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 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 >
|
../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
!
|
اندازه واقعی عکس به کار رفته
|
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نظر خودتان درباره این صفحه را با ما در میان بگذارید :