CSS

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

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

التاريخ

28 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

1937

المواضيع

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

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

مراجعة تقنية
Mostafa Hefny

Mostafa Hefny

CEO & Founder CloseTag

</> 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;
}
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات