الخاصية background-attachment

من موسوعة حسوب
< CSS
مراجعة 09:59، 7 مارس 2018 بواسطة عبد اللطيف ايمش (نقاش | مساهمات) (إضافة قسمين وأمثلة)
(فرق) → مراجعة أقدم | المراجعة الحالية (فرق) | مراجعة أحدث ← (فرق)

الخاصية background-attachment في CSS تُحدِّد إذا كان موضع الصورة (المُحدَّدة عبر الخاصية background-image) ثابتًا (fixed) ضمن إطار العرض (viewport) أو كان سيُمرَّر عند التمرير في العنصر (أو الصفحة) الحاوي له.

بطاقة الخاصية

القيمة الابتدائية scroll
تُطبَّق على جميع العناصر.
قابلة للوراثة لا
قابلة للتحريك نعم
القيمة المحسوبة كالقيمة المُحدَّدة.
/* كلمات مفتاحية */
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

/* القيم العامة */
background-attachment: inherit;
background-attachment: initial;
background-attachment: unset;

أمثلة

مثال بسيط عن استخدام الخاصية background-attachment لجعل موضع صورة الخلفية (المُحدَّدة عبر الخاصية background-image) ثابتًا. شيفرة HTML:

<p>
تهدف موسوعة حسوب لتوفير توثيق عربي كامل وعالي الجودة، مدعّم بالأمثلة لمختلف لغات البرمجة وتقنيات تطوير الويب والجوال. تعتمد الموسوعة على فريق من المحررين والمساهمين المتطوعين أولي الخبرة البرمجية واللغوية، وترحّب بكل من يرغب بالمساهمة فيها. اعرف المزيد عن موسوعة حسوب واطلع على دليل المساهمين.
</p>

شيفرة CSS:

p {
  background-image: url("image.png");
  background-attachment: fixed;
}

مثال عن استخدام أكثر من صورة للخلفية (background-image)، مع تحديد قيمة مختلفة لكلٍ منها عبر الخاصية background-attachment (ويُفصل بين تلك القيم بفاصلة)؛ لاحظ أنَّنا استخدامنا الخاصية background-repeat لضبط كيفية تكرار صورة الخلفية. شيفرة HTML:

<div>
  <p>
    تهدف أكاديمية حسوب إلى توفير دورات، كتب، مقالات ودروس متخصصّة عالية الجودة حول مجالات مُختلفة باللغة العربية. وتركّز أكاديمية حسوب بشكل رئيسي على تعليم البرمجة، إدارة الأعمال بمُختلف تفرّعاتها، التسويق والمبيعات، التصميم والجرافيكس بمُختلف ألوانه، العمل الحر والعمل عن بعد، إدارة الخواديم ومجال DevOps بالإضافة الى الشهادات المتخصصة وشروحات استخدام البرامج والتطبيقات. 
  </p>
  <p>
    باب المُساهمة على الأكاديمية مفتوح لكل من يرى في نفسه القدرة على توفير محتوى عربي عالي الجودة يسهم بتطوير مجتمعنا العربي. للمزيد من التّفاصيل ألق نظرة على صفحة اكتب معنا ان كنت مهتماً بالمساهمة ككاتب، وصفحة درّب معنا إن كنت تمتلك خبرات متخصصة، قادر على إعداد دورات تدريبية وترغب بالانضمام لمدربي أكاديمية حسوب. 
  </p>
  <p>
    ان كنت تبحث عن المزيد، توفر موسوعة حسوب توثيق شامل للغات البرمجة وتقنيات تطوير الويب والجوال.
  </p>
</div>

شيفرة CSS:

div {
  background-image: url("image-1.png"), url("image-2.png");
  background-attachment: fixed, scroll;
  background-repeat: no-repeat, repeat-y;
}

دعم المتصفحات

الميزة Chrome Firefox Internet Explorer Opera Safari
الدعم الرئيسي 1.0 1.0 4 3.5 1.0
خلفيات متعددة 1.0 3.6 9.0 10.5 1.3

البنية العامة

قيمة الخاصية background-attachment تكون إحدى الكلمات المفتاحية الآتية:

<attachment>

fixed

يكون موضع الخلفية ثابتًا (fixed) بالنسبة إلى إطار العرض، وإذا امتلك العنصر إمكانية التمرير (scroll)، فلن تتحرك الخلفية مع العنصر.

local

تكون صورة الخلفية ثابتةً نسبةً إلى محتوى العنصر، فلو امتلك العنصر إمكانية التمرير فستتحرك الخلفية مع محتوى العنصر.

scroll

تكون الخلفية ثابتةً نسبةً إلى العنصر نفسه ولا تتحرك مع محتوياته.

البنية الرسمية

background-attachment: <attachment>#;

يمكن تكرار القيم لتطبيقها على أكثر من صورة خلفية بفصلها بفاصلة ,.

<attachment> = scroll | fixed | local

انظر أيضًا

مصادر ومواصفات