خاصية خلفية CSS
مثال
قم بتعيين خصائص خلفية مختلفة في إعلان واحد:
body
{
background: lightblue url("img_tree.gif") no-repeat fixed center;
}
التعريف والاستخدام
الخاصية هي background
خاصية مختصرة من أجل:
- لون الخلفية
- الصورة الخلفية
- خلفية الموقف
- حجم الخلفية
- تكرار الخلفية
- أصل الخلفية
- مقطع الخلفية
- مرفق الخلفية
لا يهم إذا كانت إحدى القيم المذكورة أعلاه مفقودة ، على سبيل المثال الخلفية: # ff0000 url (smiley.gif)؛ مسموح.
القيمة الافتراضية: | انظر الخصائص الفردية |
---|---|
وارث: | رقم |
متحرك: | نعم ، انظر الخصائص الفردية . اقرأ عن animatable |
الإصدار: | CSS1 + خصائص جديدة في CSS3 |
بناء جملة JavaScript: | object .style.background = "عنوان url أحمر (smiley.gif) أعلى اليسار بدون تكرار" |
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
Property | |||||
---|---|---|---|---|---|
background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
ملاحظة: انظر دعم المستعرض الفردي لكل قيمة أدناه.
بنية CSS
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
ملاحظة: إذا كانت إحدى الخصائص في التصريح المختصر هي خاصية bg-size ، فيجب عليك استخدام / (شرطة مائلة) لفصلها عن خاصية bg-position ، على سبيل المثال background: url (smiley.gif) 10px 20px / 50px 50px ؛ سينتج عن صورة خلفية ، يتم وضعها على بعد 10 بكسل من اليسار ، و 20 بكسل من الأعلى ، وسيكون حجم الصورة بعرض 50 بكسل وارتفاع 50 بكسل.
ملاحظة: إذا كنت تستخدم العديد من مصادر صورة الخلفية ولكنك تريد أيضًا لون الخلفية ، فيجب أن تكون معلمة لون الخلفية في القائمة الأخيرة.
قيم الملكية
Value | Description | CSS |
---|---|---|
background-color | Specifies the background color to be used | 1 |
background-image | Specifies ONE or MORE background images to be used | 1 |
background-position | Specifies the position of the background images | 1 |
background-size | Specifies the size of the background images | 3 |
background-repeat | Specifies how to repeat the background images | 1 |
background-origin | Specifies the positioning area of the background images | 3 |
background-clip | Specifies the painting area of the background images | 3 |
background-attachment | Specifies whether the background images are fixed or scrolls with the rest of the page | 1 |
initial | Sets this property to its default value. Read about initial | 3 |
inherit | Inherits this property from its parent element. Read about inherit | 2 |
الصفحات ذات الصلة
برنامج CSS التعليمي: CSS Background ، CSS Backgrounds (متقدم)
مرجع DOM HTML: خاصية الخلفية