CSS Background Image
خلفيات صور في لغة CSS
ستتعلم في هذا الدرس تغيير خلفيات عناصر HTML بلغة CSS كصور وليس ألوان وأيضاً طريقة أستخدام الخلفيات صور مع الألوان.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
CSS Background Image
خلفيات صور في لغة CSS
</>
CSS Background Image
خلفيات صور في لغة CSS
عن طريق خاصية background-image يمكن تعيين لأي عنصر في ملف HTML خلفية صورة بلغة CSS ويمكن إستخدامها أيضاً مع الخلفيات الألوان.
- يتم تحديد القيمة عن طريقة url وهي إضافة مسار الصورة بجوار ملف HTML.
- يمكن إضافة مسار الصورة internal أو external مسار من رابط سيرفر أخر أو من علي السيرفر المحلي.
- يمكن أستخدام خلفيات متحركة عن طريق الأشارة إلي صور gif في مسار الصورة.
قيم خاصية خاصية background-image:
- url تحديد مسار صورة الخلفية absolute url vs relative url.
- none وهي إلغاء الخلفية الصورة في حال كانت هناك خلفية لهذا العنصر
- initial وهي تعيين الخلفية للخلفية الافتراضية.
- inherit وهي وراثة الخلفية من العنصر الأب parent.
backgroud syntax
طريقة كتابة القيم بداخل خاصية background-color في لغة CSS.
background-image:url|none|initial|inherit;
</>
CSS background-image url
قيمة url لخاصية background-image في لغة CSS
إستخدام قيمة url لخاصية background-image في لغة CSS لتحديد مسار صورة الخلفية.
- تظهر خلفية العنصر بحجمه الحالي مثلاً عنصر طولة 500 بكسل وعرضة 500 فالخلفية تغطي جميع المساحة حتي وإن كانت الصورة أصغر يتم تكرارها وإذا كانت الصور اكبر من مساحة العنصر يظهر جزء منها فقط.
خاصية background-image:
- تُكتب قمية url متبوعة بالأقواس parentheses في مع خاصية لتصبح بهذا الشكل ()background-image:url.
- يُكتب بداخل الأقواس بعد url مسار الصورة في خاصية background-image.
- يُكتب مسار الصورة absolute url vs relative url من مصدر خارجي أو صورة بجوار ملف CSS.
CSS background image relative url
تحديد مسار الصورة relative من صورة بجانب ملف CSS.
h1
{
background-image:url('/images/background.jpg');
}
CSS background image absolute url
تحديد مسار الصورة absolute من صورة من سيرفر خارجي وإضافة الرابط كاملاً.
h1
{
background-image:url('https://www.closetag.com/images/background.jpg');
}
</>
CSS background-image none
قيمة none لخاصية background-image في لغة CSS
تُستخدم القيمة none مع خاصية background-image لألغاء صورة الخلفية في لغة CSS.
- تمت إضافة خلفية صورة ثم قمنا بألغائها عن طريق قيمة none.
CSS background image none
إلغاء الخلفية عن طريق إستخدام القيمة none مع خاصية background-image.
h1
{
background-image:url('https://www.closetag.com/images/background.jpg');
background-image:none;
}
</>
CSS background-image inherit
قيمة inherit لخاصية background-image في لغة CSS
تُستخدم القيمة inherit مع خاصية background-image لتوريث العنصر خلفية صورة من العنصر الأب الزي يتفرع منه.
- يتم إضافة نفس الخلفية للعنصر الأب الزي يتفرع منه العنصر الزي قمنا بتحديد القيمة inherit.
CSS background image inherit
يتم توريث الخلفية من العنصر الأب parent.
body
{
background-image:url('https://www.closetag.com/images/background.jpg');
}
h1
{
background-image:inherit;
}
</>
CSS background-image initial
قيمة initial لخاصية background-image في لغة CSS
تُستخدم القيمة initial مع خاصية background-image لأعادة تعيين الخلفية للوضع الأفتراضي فيما قبل إضافة الصورة.
- يتم تعيين القيم للوضع الأفتراضي عن طريق القيمة initial.
CSS background image initial
يتم إلغاء أي خلفيات والعودة لما قبل الخلفيات عن طريق initial مع خاصية background-image.
body
{
background-image:url('https://www.closetag.com/images/background.jpg');
}
h1
{
background-image:inherit;
background-image:initial;
}
صورة خلفية
قيمة
داخلي
خارجي
عنصر
جسم المحتوي
خلفية
خاصية
صورة
Cascading Style Sheets
صفحات الأنماط الانسيابية
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
