خصوصیات background-size CSS
- صفحه قبل background-repeat
- صفحه بعدی block-size
تعریف و استفاده
background-size ویژگی تعیین اندازه تصویر پس‌زمینه.
لطفاً ببینید:
آموزش CSS:پس‌زمینه CSSوپشتیبانی پس‌زمینه CSS (پیشرفته)
دستورالعمل مرورگر HTML DOM:ویژگی backgroundSize
مثال
تعیین اندازه تصویر پس‌زمینه:
div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
جملات CSS
background-size: length|percentage|cover|contain;
مقدار ویژگی
| مقدار | توضیح | آزمایش |
|---|---|---|
| length |
ارتفاع و عرض تصویر پس‌زمینه را تنظیم می‌کند. مقدار اول عرض را تنظیم می‌کند، مقدار دوم ارتفاع را تنظیم می‌کند. اگر فقط یک مقدار تنظیم شود، مقدار دوم به "auto" تنظیم می‌شود. |
آزمایش |
| percentage |
عرض و ارتفاع تصویر پس‌زمینه با استفاده از درصد از عنصر پدر تنظیم می‌شود. مقدار اول عرض را تنظیم می‌کند، مقدار دوم ارتفاع را تنظیم می‌کند. اگر فقط یک مقدار تنظیم شود، مقدار دوم به "auto" تنظیم می‌شود. |
آزمایش |
| cover |
گسترش تصویر پس‌زمینه به اندازه کافی تا تصویر پس‌زمینه به طور کامل محدوده پس‌زمینه را پوشش دهد. بعضی از بخش‌های تصویر پس‌زمینه ممکن است در محدوده قرارگیری پس‌زمینه نمایش داده نشوند. |
آزمایش |
| contain | گسترش تصویر تا ابعاد بزرگترین ممکن تا عرض و ارتفاع آن به طور کامل با محدوده محتوای تطابق داشته باشد. | آزمایش |
جزئیات فنی
| مقدار پیش‌فرض: | auto |
|---|---|
| erbیت‌پذیری: | no |
| نسخه: | CSS3 |
| جملات زبان JavaScript: | object.style.backgroundSize="60px 80px" |
مثال‌های بیشتر
- باز کردن تصویر پس‌زمینه
- باز کردن تصویر پس‌زمینه تا به طور کامل محدوده محتوای را پوشش دهد.
- باز کردن تصویر پس‌زمینه تا تصویر پس‌زمینه به طور افقی چهار بار کپی شود
- باز کردن تصویر پس‌زمینه تا تصویر پس‌زمینه به طور دقیق چهار بار به صورت افقی کپی شود.
پشتیبانی مرورگر
تعداد در جدول نشان‌دهنده نسخه اولین مرورگر پشتیبان از این ویژگی است.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | IE / Edge | Firefox | Safari | Opera |
| 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
- صفحه قبل background-repeat
- صفحه بعدی block-size
