خصائص Style background
- الصفحة السابقة animationPlayState
- الصفحة التالية backgroundAttachment
- العودة إلى الطبقة السابقة موضوع Style HTML DOM
تعريف والاستخدام
background
تُستخدم الخاصية لضبط/إرجاع أكبر ثمانية خصائص خلفية بشكل مختصر.
من خلال هذه الخاصية، يمكنك تعيين/إرجاع الآتي أو أكثر (بأي ترتيب):
خصائص DOM | CSS الخاصية |
---|---|
backgroundAttachment | background-attachment |
backgroundClip | background-clip |
backgroundColor | background-color |
backgroundImage | background-image |
backgroundOrigin | background-origin |
backgroundPosition | background-position |
backgroundRepeat | background-repeat |
backgroundSize | background-size |
يمكن أيضًا استخدام خصائص النمط الفردية لضبط هذه الخصائص. يُنصح بتجنب استخدام النصائح الفردية للمطورين غير المتقدمين للحصول على تحكم أفضل.
يرجى الرجوع إلى:
دليل CSS3:خلفية CSS
دليل CSS3:خلفيات CSS3
دليل CSS:خصائص background
مثال
تعيين نمط خلفية المستند:
document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right top";
هناك أمثلة TIY أكثر في أسفل الصفحة.
النحو
استرداد خاصية background:
الشكل.style.background
تعيين خاصية background:
الشكل.style.background = "اللون الصورة التكرار الإلصاق الموقع الحجم المنشأ القص|الافتراضي|التوريث"
قيمة الخصائص
القيمة | الوصف |
---|---|
اللون | تعيين لون الخلفية للعنصر. |
الصورة | تعيين صورة الخلفية للعنصر. |
التكرار | تعيين طريقة تكرار الصورة الخلفية. |
الإلصاق | تعيين إذا كانت الصورة الخلفية ثابتة أم تتحرك مع الصفحة. |
الموقع | تعيين موقع بدء الصورة الخلفية. |
الحجم | تعيين حجم الصورة الخلفية. |
المنشأ | تعيين منطقة التثبيت للخلفية. |
القص | تعيين منطقة رسم الصورة الخلفية. |
الافتراضي | أعد هذا الخصائص إلى قيمته الافتراضية. يرجى الرجوع إلى الافتراضي. |
التوريث | يرث هذا الخصائص من العنصر الأم. يرجى الرجوع إلى التوريث. |
تفاصيل تقنية
القيمة الافتراضية: | شفاف غير محدد تكرار تمرير 0% 0% تلقائي حاوية الحدود حاوية الحدود |
---|---|
القيمة المعدلة: | السلسلة، تعبر عن خلفية العنصر. |
إصدار CSS: | CSS1 + خصائص جديدة في CSS3 |
مزيد من الأمثلة
مثال 2
تغيير لون الخلفية لـ DIV
document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";
مثال 3
تعيين لون الخلفية للوثيقة:
document.body.style.backgroundColor = "red";
مثال 4
تعيين صورة الخلفية للوثيقة:
document.body.style.backgroundImage = "url('img_tree.png')";
مثال 5
تعيين صورة الخلفية كغير مكررة:
document.body.style.backgroundRepeat = "repeat-y";
مثال 6
تعيين صورة الخلفية كمتثبتة (لن تتحرك أثناء التمرير):
document.body.style.backgroundAttachment = "fixed";
مثال 7
تغيير موقع صورة الخلفية:
document.body.style.backgroundPosition = "top right";
مثال 8
إرجاع قيمة الخاصية الخلفية للوثيقة:
document.body.style.background;
دعم المتصفحات
background
هي الخاصية الخاصة بـ CSS1 (1996).
يدعم جميع المتصفحات بشكل كامل:
Chrome | Edge | Firefox | Safari | Opera | IE |
---|---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera | IE |
الدعم | الدعم | الدعم | الدعم | الدعم | الدعم |
تعليقات
تم إضافة ثلاثة خصائص جديدة في CSS3 (1999):
- الصفحة السابقة animationPlayState
- الصفحة التالية backgroundAttachment
- العودة إلى الطبقة السابقة موضوع Style HTML DOM