English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
CSS background-size property specifies the size of the background image.
الجدول أدناه يلخص استخدام هذا الخاصية و تاريخ الإصدارات.
| القيمة الافتراضية: | auto auto |
|---|---|
| تطبيقها على: | جميع العناصر |
| الوراثة: | لا |
| يمكن تفعيله عن طريق الرسوم المتحركة: | نعم.يرجى الرجوع إلى خصائص الرسوم المتحركة. |
| الإصدار: | نوع جديد من CSS3 |
| JavaScript Syntax: | object object.style.backgroundSize="60px 80px" |
نموذج الجملة للخاصية هو كما يلي:
background-size: length | percentage | auto | cover | contain | initial | inherit
في هذا المثال، يتم عرض كيفية استخدام خاصية background-size.
.box {
width: 250px;
height: 150px;
padding: 10px;
border: 6px dashed #333;
background: url("images/sky.jpg") no-repeat;
background-size: contain;
}اختبار لـ‹/›إشارةتستخدم الخاصية background-size عادة لإنشاء صور خلفية كاملة الحجم، وتوسيع الصورة بناءً على حجم نافذة المتصفح أو عرضها.
يصف الجدول أدناه القيم لهذه الخاصية.
| القيمة | وصف |
|---|---|
| length | ضبط عرض الصورة الخلفية وارتفاعها إلى طول معين. القيمة الأولى تضبط العرض، والقيمة الثانية تضبط الارتفاع. إذا تم تحديد قيمة واحدة فقط، فإن القيمة الثانية افتراضية auto. لا يسمح باستخدام القيم السلبية للطول. |
| percentage | ضبط عرض الصورة الخلفية وارتفاعها إلى نسبة المئة من منطقة تحديد الخلفية. القيمة الأولى تضبط العرض، والقيمة الثانية تضبط الارتفاع. إذا تم تحديد قيمة واحدة فقط، فإن القيمة الثانية افتراضية auto. لا يسمح باستخدام القيم السلبية بالمئة. |
| auto | استخدام auto لقياس حجم الصورة في الاتجاه المناسب لقياس الصورة، مما يحافظ على النسبة المئوية الأصلية. إذا تم تحديد كلا الحجمين، فإن الصورة الخلفية ستكون تحتوي على عرضها وارتفاعها الخاصة، وهو السلوك الافتراضي. |
| cover | توسيع الصورة إلى أقل حجم، مع الحفاظ على نسبة الطول والعرض الأصلية (إذا كانت موجودة)، لجعل عرضها وارتفاعها يمكن أن تغطي منطقة تحديد الخلفية بالكامل. |
| contain | توسيع الصورة، مع الحفاظ على نسبة الطول والعرض الأصلية (إذا كانت موجودة)، إلى أقصى حجم ممكن، لجعل عرضها وارتفاعها يمكن أن تتوافق مع منطقة تحديد الخلفية. |
| initial | ضبط هذه الخاصية إلى قيمتها الافتراضية. |
| inherit | إذا تم تحديد، فإن العناصر ذات الصلة تأخذ قيمة حساب الخاصية background-size للاعلى |
مرونة خصائص background-size للبrowsers، جميع المتصفحات الرئيسية تدعم هذه الخاصية.
|
يرجى الرجوع إلى التعليمات التالية:CSS Background,CSS3 Background.
خصائص ذات صلة:background,background-attachment,background-color,background-image,background-clip,background-position,background-repeat,background-origin.