خصوصیت background-size
مثال (خصوصیت background-size)
مشخص کردن اندازه عکس پس زمینه:
div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
خودتان امتحان کنید »
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
در انتهای این بیاموز، مثال های بیشتری را خواهید دید.
پشتیبانی مرورگرها
تمام مرورگرهای اصلی، خصوصیت background-size را پشتیبانی می کنند.
توجه: مرورگر Internet Explorer 8 و نسخه های قبلی آن، خصوصیت background-size را پشتیبانی نمی کند.
تعریف و کاربرد
با استفاده از خاصیت background-size می توانید اندازه تصویر پس زمینه را مشخص نمایید.
| مقدار پیشفرض | auto |
|---|---|
| ارث بری | خیر |
| نسخه | CSS3 |
| JavaScript ساختار | object.style.backgroundSize="60px 80px" |
نحوه استفاده
background-size: length|percentage|cover|contain;
| مقدار | توضیحات | نمایش دادن |
|---|---|---|
| length | width و height عکس پس زمینه را تنظیم می کند. اولین مقدار width و دومی height است. اگر فقط یک مقدار تنظیم شود، دومی با مقدار "auto" تنظیم می شود. | نمایش دادن » |
| percentage | width و height عکس پس زمینه را بصورت درصدی از عنصر والدش تنظیم می کند. اولین مقدار width و دومی height است. اگر فقط یک مقدار تنظیم شود، دومی با مقدار "auto" تنظیم می شود. | نمایش دادن » |
| cover | اندازه عکس پس زمینه به قدری بزرگ می شود که تمام ناحیه content را بپوشاند. ممکن است مقداری از عکس پس زمینه داخل ناحیه content قرار نگیرد و قابل رویت نباشد. | نمایش دادن » |
| contain | اندازه عکس پس زمینه به قدری بزرگ می شود که در ناحیه content جا شود و در ضمن تمام آن قابل رویت باشد. | نمایش دادن » |
مثال - خودتان امتحان کنید
بسط کامل عکس پس زمینه در ناحیه content
بسط دادن تصویر پس زمینه (کشیدن) بصورتی که ناحیه content را بصورت کامل بپوشاند.
نمایش دو کپی از عکس پس زمینه
بسط دادن تصویر پس زمینه بصورتی که دقیقاً 2 کپی از آن در جهت افقی وجود داشته باشد.
بیاموزهای مرتبط
CSS3 Background (بیاموز CSS3)
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 11381
دیدگاه‌ها
سلام.
خیلی ممنون بسیار عالی بود.
تفاوت cover و content رفته بود رو مخم:(