مثال
تعيين خصائص خلفية مختلفة في إعلان واحد:
body
{
background: #00ff00 url("smiley.gif") no-repeat fixed center;
}
انها محاولة لنفسك » تعريف واستخدام
الخلفية الخاصية المختصرة يحدد كل خصائص الخلفية في إعلان واحد.
الخصائص التي يمكن تعيينها، هي: لون الخلفية، خلفية الصورة، خلفية الموقف، بحجم الخلفية، الخلفية تكرار، الخلفية الأصل، خلفية كليب، وخلفية المرفق.
لا يهم إذا كان أحد القيم أعلاه هي في عداد المفقودين، على سبيل المثال الخلفية: # FF0000 url(smiley.gif) . مسموح.
| القيمة الافتراضية: | see individual properties |
|---|---|
| وارث: | no |
| Animatable: | yes, see individual properties . Read about animatable Try it |
| الإصدار: | CSS1 + new properties in CSS3 |
| جافا سكريبت بناء الجملة: | object .style.background="red url(smiley.gif) top left no-repeat" Try it |
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل العقار.
| خاصية | |||||
|---|---|---|---|---|---|
| background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Note: إنترنت إكسبلورر 8 والإصدارات السابقة لا تدعم متعددة خلفية الصور على عنصر واحد.
ملاحظة: انظر دعم المتصفح الفردية لكل قيمة أقل.
CSS بناء الجملة
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;ملاحظة: إذا كان أحد الخصائص في إعلان الاختزال هو ملك بحجم حرس الحدود، يجب عليك استخدام / (slash) لفصلها عن الممتلكات BG-الموقف، على سبيل المثال background:url(smiley.gif) 10px 20px / 50px 50px . سيؤدي في صورة خلفية، وضع 10 بكسل من الناحية اليسرى في 20 بكسل من أعلى، وسوف حجم الصورة يكون 50 بكسل وارتفاع 50 بكسل.
ملاحظة: في حالة استخدام مصادر متعددة خلفية الصورة ولكن أيضا تريد لون الخلفية، تحتاج المعلمة لون الخلفية أن يكون الأخير في القائمة.
قيم الملكية
| القيمة | وصف | CSS |
|---|---|---|
| background-color | يحدد لون الخلفية لاستخدامها | 1 |
| background-image | تحديد واحد أو أكثر الصور الخلفية لاستخدامها | 1 |
| background-position | يحدد موضع من الصور الخلفية | 1 |
| background-size | يحدد حجم الصور الخلفية | 3 |
| background-repeat | تحدد كيفية تكرار الصور الخلفية | 1 |
| background-origin | تحدد منطقة المواقع من الصور الخلفية | 3 |
| background-clip | تحدد منطقة اللوحة من الصور الخلفية | 3 |
| background-attachment | يحدد ما إذا كانت الصور الخلفية ثابتة أو متحركة مع بقية الصفحة | 1 |
| مبدئي | تحدد هذه الخاصية إلى قيمته الافتراضية. قرأت عن الأولي | 3 |
| يرث | يرث هذه الخاصية من عنصر الأم. قراءة حول وراثة | 2 |
صفحات ذات صلة
درس CSS: CSS الخلفية
CSS3 البرنامج التعليمي: خلفيات CSS3
HTML DOM إشارة: background property