CSS

CSS Multiple Backgrounds
خلفيات متعددة للعناصر في لغة CSS

سوف تتعلم في هذا الدرس كيفية إضافة صور أكثر من خلفية إلى عنصر واحد أو خلفية صورة مع خلفية لون لعنصر واحد في لغة CSS.

التاريخ

28 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

1609

المواضيع

24
الشروحات chevron_left CSS Multiple Backgrounds chevron_left CSS
CSS Flex Box keyboard_arrow_down

CSS Multiple Backgrounds
خلفيات متعددة للعناصر في لغة CSS

</> CSS multiple backgrounds images
خلفيات صور متعددة للعناصر في لغة CSS

في لغة CSS يمكن إضافة أكثر من خلفية صورة لعنصر واحد وذلك عن طريق تحديد العنصر وإضافة مسار صورتين عن طريق خاصية background-image.

خطوات عمل خلفيتي صور للعنصر في لغة CSS:

  • تجهيز صورتين صورة كبيرة وصورة صغيرة.
  • عن طريق خاصية background-image نقوم بإضافة 2 من url.
  • كل url نكتب بداخله مسار كل صورة.
  • عن طريق background-position يمكن التحكم في موضع الخلفيات.
  • وعن طريق background-repeat التحكم في تكرار الصورة الكبيرة وعدم تكرار الصورة الصغيرة.

is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

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 يمكن إضافة أكثر من خلفية صورة لعنصر واحد وذلك عن طريق تحديد العنصر وإضافة مسار صورتين عن طريق خاصية 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;
}
مصطلحات الدرس
Multiple
Multiple

متعدد

Backgrounds
Backgrounds

خلفيات

Size
Size

حجم

Origin
Origin

أصل

Clip
Clip

مقطع

Image
Image

صورة

Shorthand
Shorthand

إختصار

Cover
Cover

تغطية / يغطي

Contain
Contain

تحتوي / إحتواء

Define
Define

يعرف / يحدد

Images
Images

صور

Comma
Comma

فاصلة

Full Size
Full Size

حجم كامل

Scrollbar
Scrollbar

شريط التمرير

Fixed
Fixed

ثابت

Hero
Hero

رئيسي / بطل

Property
Property

خاصية

Box
Box

صندوق

Content
Content

محتوي

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
HTML
HTML

Hypertext Markup Language

لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
link
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.