في هذا الدرس 4تصفّح المواضيع
إذا كانت صورة الخلفية أصغر من حجم الحاوية أو أصغر من مساحة العنصر فسوف تتكرر صورة الخلفية بشكل تلقائي وهذا التكرار يكون تكرار علي محور x ومحور Y تتكرر أفقياً ورأسياً مع خاصية background-image.
عن طريق خاصية background-repeat يمكن التحكم في تكرار صورة الخلفية أو إلغاء التكرار أو تكرار علي محور x أو محور تكرار أفقي أو تكرار رأسي.
قيم خاصية background-repeat:
- no-repeat تمنع تكرار الصورة.
- repeat-x تكرار الصورة أفقي.
- repeat-y تكرار الصورة رأسي.
Default Value
في الوضع الطبيعي يتم تكرار الخلفية في حال إذا كانت الصورة أصغر من حجم العنصر.
لعمل تكرار الخلفية أفقي نستخدم خاصية background-repeat مع القيمة repeat-x.
repeat x
تكرار الخلفية أفقياً عن طريق إستخدام القيمة repeat x مع خاصية background-repeat.
body
{
background-image:url('images/background.jpg');
background-repeat: repeat-x;
}body
{
background-image:url('images/background.jpg');
background-repeat: repeat-y;
}لألغاء تكرار الخلفية أفقي ورأسي نستخدم خاصية background-repeat مع القيمة no-repeat.
no-repeat
إلغاء التكرار بواسطة قمية no-repeat مع خاصية. css background-repeat.
body
{
background-image:url('images/background.jpg');
background-repeat:no-repeat;
}سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات7
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Repeat تكرار
- للمراجعة
- 02 Background خلفية
- للمراجعة
- 03 Property خاصية
- للمراجعة
- 04 Element عنصر
- للمراجعة
- 05 No-Repeat عدم تكرار
- للمراجعة
- 06 Repeat-x تكرار أفقي
- للمراجعة
- 07 Repeat-y تكرار عامودي
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات1
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS CSS
- Cascading Style Sheets
- صفحات الأنماط الانسيابية
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.