CSS Multiple Backgrounds
خلفيات متعددة للعناصر في لغة CSS
سوف تتعلم في هذا الدرس كيفية إضافة صور أكثر من خلفية إلى عنصر واحد أو خلفية صورة مع خلفية لون لعنصر واحد في لغة CSS.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
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;
}
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
