في هذا الدرس 2تصفّح المواضيع
CSS multiple backgrounds images
خلفيات صور متعددة للعناصر في لغة CSS
CSS multiple backgrounds images خلفيات صور متعددة للعناصر في لغة CSS
في لغة CSS يمكن إضافة أكثر من خلفية صورة لعنصر واحد وذلك عن طريق تحديد العنصر وإضافة مسار صورتين عن طريق خاصية background-image.
خطوات عمل خلفيتي صور للعنصر في لغة CSS:
- تجهيز صورتين صورة كبيرة وصورة صغيرة.
- عن طريق خاصية background-image نقوم بإضافة 2 من url.
- كل url نكتب بداخله مسار كل صورة.
- عن طريق background-position يمكن التحكم في موضع الخلفيات.
- وعن طريق background-repeat التحكم في تكرار الصورة الكبيرة وعدم تكرار الصورة الصغيرة.
CSS multiple backgrounds images
أكثر من خلفية صورة لعنصر واحد في لغة CSS.
div
{
background-image: url(https://www.closetag.com/images/tree2.png), url(/images/diamonds.png);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}
CSS multiple backgrounds image with color
خلفيات لون مع صورة للعناصر في لغة CSS
CSS multiple backgrounds image with color خلفيات لون مع صورة للعناصر في لغة CSS
في لغة CSS يمكن إضافة أكثر من خلفية صورة لعنصر واحد وذلك عن طريق تحديد العنصر وإضافة مسار صورتين عن طريق خاصية background-image.
خطوات عمل خلفيتي صور للعنصر في لغة CSS:
- تجهيز صورتين صورة كبيرة وصورة صغيرة.
- عن طريق خاصية background-image نقوم بإضافة 2 من url.
- كل url نكتب بداخله مسار كل صورة.
- عن طريق background-position يمكن التحكم في موضع الخلفيات.
- وعن طريق background-repeat التحكم في تكرار الصورة الكبيرة وعدم تكرار الصورة الصغيرة.
CSS multiple backgrounds image with color
أكثر من خلفية صورة + لون لعنصر واحد في لغة CSS.
.item
{
background-color:pink;
background-image: url(https://www.closetag.com/images/tree2.png);
background-position: right bottom;
background-repeat: no-repeat;
padding: 15px;
}سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات20
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Multiple متعدد
- للمراجعة
- 02 Backgrounds خلفيات
- للمراجعة
- 03 Size حجم
- للمراجعة
- 04 Origin أصل
- للمراجعة
- 05 Clip مقطع
- للمراجعة
- 06 Image صورة
- للمراجعة
- 07 Shorthand إختصار
- للمراجعة
- 08 Cover تغطية / يغطي
- للمراجعة
- 09 Contain تحتوي / إحتواء
- للمراجعة
- 10 Define يعرف / يحدد
- للمراجعة
- 11 Images صور
- للمراجعة
- 12 Comma فاصلة
- للمراجعة
- 13 Full Size حجم كامل
- للمراجعة
- 14 Scrollbar شريط التمرير
- للمراجعة
- 15 Fixed ثابت
- للمراجعة
- 16 Hero رئيسي / بطل
- للمراجعة
- 17 Property خاصية
- للمراجعة
- 18 Box صندوق
- للمراجعة
- 19 Padding حشو
- للمراجعة
- 20 Content محتوي
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات2
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS CSS
- Cascading Style Sheets
- صفحات الأنماط الانسيابية
- للمراجعة
- 02 HTML HTML
- Hypertext Markup Language
- لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت<p><a href="https://www.closetag.com/tutorial/html/html-introduction">المزيد عن HTML</a></p>
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي3 أسئلة تنتظرك ＋
تسمح لنا CSS إضافة صور خلفية متعددة لعنصر واحد ؟
تتيح لك خاصية...........في CSS تحديد حجم صور الخلفية
____