صورة خلفية CSS - كيفية إضافة عنوان URL للصورة إلى Div

لنفترض أنك تريد وضع صورة أو اثنتين على صفحة ويب. إحدى الطرق هي استخدام background-imageخاصية CSS.

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

أضف صورة

من السهل إضافة صورة باستخدام background-imageالخاصية. فقط قم بتوفير المسار إلى الصورة url()بالقيمة.

يمكن أن يكون مسار الصورة عنوان URL ، كما هو موضح في المثال أدناه:

div { /* Background pattern from Toptal Subtle Patterns */ background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"); height: 400px; width: 100%; } 

أو يمكن أن يكون مسارًا محليًا. هذا مثال:

body { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("./images/oriental-tiles.png"); } 

إضافة صور متعددة

يمكنك تطبيق صور متعددة على background-imageالممتلكات.

div { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); background-repeat: no-repeat, no-repeat; background-position: right, left; } 

هذا كثير من التعليمات البرمجية. دعونا نكسرها.

افصل بين url()قيمة كل صورة بفاصلة.

background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); 

الآن ضع صورك وحسنها من خلال تطبيق خصائص إضافية.

background-repeat: no-repeat, no-repeat; background-position: right, left; 

هناك العديد من الخصائص الفرعية التي يمكنك إضافتها إلى صور الخلفية الخاصة بك ، مثل background-repeatو background-position، والتي استخدمناها في المثال أعلاه. يمكنك حتى إضافة تدرجات إلى صورة الخلفية.

انظر كيف يبدو عندما نجمع كل شيء معا.

ترتيب المسائل

الترتيب الذي تدرج فيه صورك مهم بسبب ترتيب التراص. هذا يعني أن الصورة الأولى المدرجة هي الأقرب للمستخدم ، وفقًا للوثائق. ثم ، التالي ، والتالي ، وهكذا.

هنا مثال.

div { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); background-repeat: no-repeat, no-repeat; } 

لقد قمنا بإدراج صورتين في الكود أعلاه. ستكون الصورة الأولى (morocco-blue.png) أمام الثانية (oriental-tile.png). كلتا الصورتين بنفس الحجم وتفتقران إلى التعتيم ، لذلك لا نرى سوى الصورة الأولى.

لكن إذا نقلنا الصورة الثانية (oriental-tile.png) إلى اليمين بمقدار 200 بكسل ، فيمكنك رؤية جزء منها (يظل الباقي مخفيًا).

هذا ما يبدو عليه عندما نجمع كل شيء معًا.

متى يجب استخدام صورة الخلفية؟

هناك الكثير مما يعجبك في هذا background-imageالعقار. لكن هناك عيب.

قد لا تكون الصورة متاحة لجميع المستخدمين ، كما تشير الوثائق ، مثل أولئك الذين يستخدمون برامج قراءة الشاشة.

هذا لأنه لا يمكنك إضافة معلومات نصية إلى background-imageالخاصية. نتيجة لذلك ، ستفقد برامج قراءة الشاشة الصورة.

استخدم background-imageالخاصية فقط عندما تحتاج إلى إضافة بعض الزخارف إلى صفحتك. بخلاف ذلك ، استخدم عنصر HTML إذا كان للصورة معنى أو غرض ، كما هو موضح في ملاحظات التوثيق.

بهذه الطريقة ، يمكنك إضافة نص إلى عنصر صورة باستخدام altالسمة التي تصف الصورة. سيتم اختيار النص المقدم بواسطة برامج قراءة الشاشة.

فكر في الأمر بهذه الطريقة: background-imageهي خاصية CSS ، وتركز CSS على العرض التقديمي أو النمط ؛ تركز HTML على الدلالات أو المعنى.

عندما يتعلق الأمر بالصور ، فلديك خيارات. إذا كانت هناك حاجة إلى صورة للزينة ، background-imageفقد يكون العقار اختيارًا جيدًا لك.

أكتب عن تعلم البرمجة وأفضل الطرق للقيام بذلك ( amymhaddad.com).