يمكن تحديد صورة خلفية لأي عنصر HTML تقريبًا.
صورة الخلفية على عنصر HTML
لإضافة صورة خلفية على عنصر HTML، استخدم سمة style في HTML وخاصية background-image في CSS:
مثال
إضافة صورة خلفية إلى عنصر HTML:
<p style="background-image: url('img_girl.jpg');">يمكنك أيضًا تحديد صورة الخلفية داخل عنصر <style>, ضمن قسم <head>:
مثال:
تحديد صورة الخلفية داخل عنصر <style>:
<style>
p {
background-image: url('img_girl.jpg');
}
</style>صورة الخلفية للصفحة
إذا كنت تريد أن تحتوي الصفحة بأكملها على صورة خلفية، يجب عليك تحديد صورة الخلفية على عنصر <body>:
مثال:
إضافة صورة خلفية للصفحة بأكملها:
<style>
body {
background-image: url('img_girl.jpg');
}
</style>تكرار صورة الخلفية
إذا كانت صورة الخلفية أصغر من العنصر، فسوف تتكرر الصورة نفسها، أفقيًا ورأسيًا، حتى تصل إلى نهاية العنصر.
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>لمنع تكرار صورة الخلفية، قم بتعيين خاصية background-repeat إلى no-repeat.
مثال:
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>تغطية خلفية
إذا كنت تريد أن تغطي صورة الخلفية العنصر بأكمله، يمكنك تعيين خاصية background-size إلى cover.
أيضًا، للتأكد من تغطية العنصر بأكمله دائمًا، قم بتعيين خاصية background-attachment إلى fixed:
بذلك، ستغطي صورة الخلفية العنصر بأكمله، دون أي تمدد (ستحتفظ الصورة بنسبها الأصلية):
مثال:
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>تمديد الخلفية
إذا كنت تريد أن تمتد صورة الخلفية لتلائم العنصر بأكمله، يمكنك تعيين خاصية background-size إلى 100% 100%:
(يرجى تضمين الصور عندما تُعزز المحتوى.)
مثال:
عند تغيير حجم نافذة المتصفح، ستلاحظ أن الصورة ستمتد، لكنها ستظل تغطي العنصر بأكمله.
مثال:
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>عنصر <picture> في HTML
يسمح لك عنصر <picture> في HTML بعرض صور مختلفة لأجهزة أو أحجام شاشات مختلفة.
عنصر <picture> في HTML
يمنح عنصر <picture> في HTML مطوري الويب المزيد من المرونة في تحديد موارد الصور.
يحتوي عنصر <picture> على واحد أو أكثر من عناصر <source>، يشير كل منها إلى صور مختلفة من خلال سمة srcset. بهذه الطريقة يمكن للمتصفح اختيار الصورة التي تناسب العرض الحالي والجهاز / أو الجهاز بشكل أفضل.
يحتوي كل عنصر <source> على سمة media التي تحدد متى تكون الصورة هي الأنسب.
مثال
عرض صور مختلفة لأحجام شاشات مختلفة:
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>ملاحظة:
- تأكد دائمًا من تحديد عنصر <img> كعنصر الطفل الأخير لعنصر <picture>. يتم استخدام عنصر <img> بواسطة المتصفحات التي لا تدعم عنصر <picture>، أو إذا لم يتطابق أي من علامات <source>.
متى يجب استخدام عنصر <picture>
هناك غرضان رئيسيان لعنصر <picture>:
1. عرض النطاق الترددي (Bandwidth)
إذا كانت لديك شاشة صغيرة أو جهاز محدود الإمكانيات، فليس من الضروري تحميل ملف صورة كبير. سيستخدم المتصفح أول عنصر <source> بقيم سمة مطابقة ويتجاهل أيًا من العناصر التالية.
2. دعم التنسيق (Format Support)
قد لا تدعم بعض المتصفحات أو الأجهزة جميع تنسيقات الصور. باستخدام عنصر <picture>، يمكنك إضافة صور بجميع التنسيقات، وسيستخدم المتصفح التنسيق الأول الذي يتعرف عليه ويتجاهل أيًا من التنسيقات التالية.
مثال
سيستخدم المتصفح أول تنسيق صورة يتعرف عليه:
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>سيستخدم المتصفح أول عنصر <source> بقيم سمة مطابقة ويتجاهل أيًا من عناصر <source> التالية.
علامات الصور في HTML
| علامة | الوصف |
|---|---|
<img> | تحدد صورة |
<map> | تحدد خريطة صورة |
<area> | تحدد منطقة قابلة للنقر داخل خريطة صورة |
<picture> | تحدد حاوية لموارد صور متعددة |
