تجهيز صورتين صورة كبيرة وصورة صغيرة.
عن طريق خاصية 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 نقوم بإضافة 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;
}

جربها بنفسك

معلومات تهمك

لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.

عدد المشاركات

التالى

CLOSETAG

منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.

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

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات CSS Multiple Backgrounds CSS