كيفية وضع صورة على خلفية في هتمل: دليل مفصل

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

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

الجسم {

الخلفية-صورة: رابط ("صورة.جبغ");

}

وبالتالي ، نقوم بتثبيت صورة باسم " صورة.جبغ " كخلفية لصفحة الويب بأكملها.

إذا كنت بحاجة إلى تعيين صورة خلفية لعنصر معين ، يمكنك استخدام خاصية صورة الخلفية المماثلة لمحدد كس لهذا العنصر. على سبيل المثال:

الآن سيكون لرأس المستوى الأول صورة خلفية باسم "الرأس".جبغ".

1. ما هي صورة الخلفية في أتش تي أم أل?
2. لماذا استخدام صورة الخلفية
3. الخطوة 1: إعداد الصورة
4. كيفية اختيار صورة مناسبة
5. كيفية تغيير حجم الصورة
6. الخطوة 2: وضع صورة على صفحة ويب
7. كيفية استخدام علامات هتمل لوضع صورة على الخلفية
8. الخطوة 3: ضبط خلفية الصورة
9. كيفية تعيين حجم صورة الخلفية
10. كيفية تعيين موضع صورة الخلفية
11. سؤال وجواب
12. كيف يمكنني وضع صورة على الخلفية في أتش تي أم أل?
13. هل من الممكن استخدام صورة محلية كخلفية?
14. كيف يمكنني تغيير حجم وموقف صورة الخلفية?
15. هل من الممكن إضافة الشفافية إلى صورة الخلفية?

ما هي صورة الخلفية في أتش تي أم أل?

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

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

يتم تعيين صورة الخلفية في هتمل باستخدام كس (أوراق الأنماط المتتالية). للقيام بذلك ، يتم استخدام خاصية صورة الخلفية ، والتي تحدد المسار إلى الصورة.

يمكن تعيين صورة الخلفية إما عن طريق المسار النسبي لملف الصورة على الخادم ، أو عن طريق عنوان ورل المطلق للصورة على خادم آخر.

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

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

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

لماذا استخدام صورة الخلفية

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

فيما يلي بعض الأسباب التي تجعل استخدام صورة الخلفية مفيدا:

1. تعزيز تأثير المحتوى: يمكن أن تكون صورة الخلفية بمثابة عنصر مهم للتأكيد على تأثير المحتوى الرئيسي لصفحة الويب وتعزيزه. يساعد على جذب انتباه المستخدمين وجعل تجربتهم البصرية أكثر إثارة للاهتمام ولا تنسى.
2. دعم العلامات التجارية: يمكن استخدام صورة الخلفية على صفحة الويب لدعم العلامة التجارية. من خلال اختيار الصور المرتبطة بعلامتك التجارية أو شعارك ، يمكنك إنشاء نمط يمكن التعرف عليه وتعزيز الاتصال المرئي مع جمهورك.
3. خلق مزاج: يمكن أن تساعد صور الخلفية في خلق حالة مزاجية معينة على صفحة الويب. من خلال اختيار صور بألوان وأنسجة وتركيبات معينة ، يمكنك نقل عاطفة وجو معين قد يكون مهما للمحتوى الخاص بك.
4. فصل الأقسام: يمكن استخدام صور الخلفية لفصل الأقسام المختلفة بصريا على صفحة الويب. إنها تساعد في تنظيم المعلومات وإضافة بنية إلى المحتوى ، مما يجعلها أكثر قابلية للفهم للمستخدمين.

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

الخطوة 1: إعداد الصورة

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

1. اختيار الصورة الصحيحة: اختر صورة تتوافق مع متطلباتك وموضوع موقع الويب الخاص بك. إيلاء الاهتمام لدقة وحجم الصورة.
2. تحسين الصورة: سيساعد ضغط الصورة وتحسينها في تقليل حجمها وتحسين تحميل الصفحة.
3. تنسيق الصورة: اختر تنسيق الصورة المناسب ، مثل الحياة السياسية في فرنسا ، ينغ أو جيف ، اعتمادا على احتياجاتك. استخدام تنسيق جبيغ للصور ، ينغ للصور مع خلفيات شفافة ، و جيف للصور المتحركة.
4. حجم الصورة: تغيير حجم الصورة وفقا لمتطلبات موقع الويب الخاص بك. يمكنك استخدام كس لتغيير حجم صورة على صفحة ويب.

تأكد من أن صورتك جاهزة للاستخدام ، وانتقل إلى الخطوة التالية – وضعها على الخلفية في هتمل.

كيفية اختيار صورة مناسبة

يعد اختيار الصورة المناسبة لخلفية صفحة الويب جزءا مهما من إنشاء تصميم ممتع من الناحية الجمالية. يمكن للصورة المختارة جيدا أن تعزز الانطباع البصري وتنقل الحالة المزاجية الصحيحة.

عند اختيار صورة ، يجب مراعاة العوامل التالية:

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

2. حجم الصورة: يجب أن تكون الصورة ذات حجم مناسب لملء خلفية صفحة الويب دون تشويه. ينصح باختيار صور عالية الدقة (تبدو جيدة على الشاشات الكبيرة) ونسبة العرض إلى الارتفاع المناسبة لتخطيط صفحة ويب معينة.

3. الألوان والتباين: يجب أن تكون الصورة مرئية بوضوح على خلفية الصفحة وتوفر تباينا جيدا مع النص والعناصر الأخرى. غالبا ما يتم استخدام الصور ذات الألوان الزاهية أو المتناقضة التي تجذب انتباه المستخدم.

4. الترخيص والتأليف: عند تحديد صورة ، تحتاج إلى التأكد من أن لديك الحق في استخدامها على صفحة الويب. من الأفضل استخدام الصور بترخيص مفتوح أو شراؤها خصيصا للاستخدام في تصميم الويب لتجنب مشكلات حقوق النشر.

نوصي باستخدام جدول لتنظيم هذه المعلومات بصريا.:

كيفية تغيير حجم الصورة

يعد تغيير حجم الصورة خطوة مهمة عند إدراج الرسومات في صفحة الويب. هتمل لديها عدة طرق للتحكم في حجم الصورة ، بما في ذلك استخدام سمات العلامة إمغ وخصائص كس.

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

سيقوم هذا الرمز بتعيين حجم الصورة على 50 ٪ من حجم الحاوية الخاصة به. يكون هذا مفيدا إذا كنت تريد تغيير حجم الصورة عند تغيير حجم نافذة المتصفح أو تخطيط الصفحة.

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

استخدام عنصر إمغ لإدراج صورة

استخدام صورة خلفية للحاوية

باستخدام خاصية صورة الخلفية المغلق

يعتمد الخيار الذي تختاره على احتياجاتك وتصميم صفحة الويب الخاصة بك. في هذه المقالة ، سنلقي نظرة على موضع الصورة باستخدام صورة خلفية الحاوية.

لوضع صورة على خلفية عنصر ما ، يجب عليك أولا إنشاء هذا العنصر. على سبيل المثال ، يمكنك إنشاء عنصر شعبة على النحو التالي:

بعد ذلك ، يمكنك استخدام خاصية صورة خلفية كس لإضافة صورة خلفية إلى هذا العنصر. على سبيل المثال ، إذا كنت تريد استخدام صورة بعنوان "الخلفية.جبغ " ، تحتاج إلى تحديد المسار إلى هذه الصورة في خاصية صورة الخلفية:

شعبة {

الخلفية-صورة: رابط ("الخلفية.جبغ");

}

بعد ذلك ، الصورة هي " الخلفية.جبغ " سيتم وضعها على خلفية عنصر ديف الخاص بك.

من المهم ملاحظة أن المسار إلى الصورة يجب أن يكون نسبيا ، أي الإشارة إلى موقع ملف الصورة بالنسبة لملف كس أو ملف هتمل.

يمكنك أيضا تخصيص خصائص الخلفية الأخرى ، مثل تكرار الصورة والحجم والموضع والمزيد ، باستخدام خصائص كس المناسبة (على سبيل المثال ، تكرار الخلفية وحجم الخلفية وموضع الخلفية).

الآن أنت تعرف كيفية وضع صورة على صفحة ويب باستخدام صورة خلفية حاوية!

كيفية استخدام علامات هتمل لوضع صورة على الخلفية

1. في هتمل ، هناك عدة طرق لوضع صورة على خلفية صفحة ويب. واحدة من أبسط الطرق وأكثرها استخداما هي استخدام علامة صورة الخلفية.
2. لتعيين صورة كخلفية ، تحتاج إلى تحديد المسار إلى ملف الصورة في سمة صورة الخلفية لعلامة النص:
3. وهكذا ، صورة مع مسار المسار إلى الصورة.سيتم استخدام جبغ كخلفية لصفحة الويب بأكملها.

يمكنك أيضا تحديد معلمات معينة لعرض صورة الخلفية.:

تسمح لك سمة تكرار الخلفية بتعيين تكرار الصورة على الخلفية. يأخذ القيم: كرر (التكرار الأفقي والرأسي) ، كرر-س (التكرار الأفقي فقط) ، كرر-ص (التكرار الرأسي فقط) أو لا-تكرار (لا تتكرر الصورة).

تسمح لك سمة موضع الخلفية بتعيين موضع الصورة على الخلفية. يأخذ القيم بالنسب المئوية أو وحدات البكسل، على سبيل المثال: 10٪ 50 ٪(إزاحة أفقية 10٪ ، إزاحة رأسية 50٪)

تسمح لك سمة حجم الخلفية بتعيين حجم صورة الخلفية. يأخذ القيم: الغلاف (يتم تمديد الصورة أو ضغطها لملء الكتلة بالكامل) ، أو تحتوي على (يتم تحجيم الصورة لتناسب الكتلة تماما) أو قيم محددة بالبكسل أو النسب المئوية (على سبيل المثال ، 800 بكسل 600 بكسل).

مثال على استخدام السمات:

سيسمح لك ذلك بتعيين الصورة على خلفية صفحة الويب دون تكرار ، في الوسط ومع التمدد أو الضغط لملء المنطقة المتاحة بالكامل.

• باستخدام علامات هتمل هذه ، يمكنك بسهولة وضع صورة على خلفية صفحة ويب وتعيين تكرارها وموقعها وأبعادها
• الخطوة 3: ضبط خلفية الصورة
• عند وضع صورة في الخلفية في هتمل ، يمكنك تخصيصه لعرض أفضل. في هذه الخطوة ، سنلقي نظرة على بعض إعدادات خلفية الصورة المتاحة.
• 1. التكرار: يمكنك تحديد كيفية تكرار الصورة على الخلفية.

كرر: سيتم تكرار الصورة أفقيا وعموديا (افتراضيا).

• كرر-س: سيتم تكرار الصورة أفقيا فقط.
• كرر ذ: سيتم تكرار الصورة عموديا فقط.
• عدم التكرار: لن تتكرر الصورة.
• 2. تحديد المواقع: يمكنك تحديد كيفية وضع الصورة على الخلفية.
• أعلى: ستكون الصورة موجودة في الجزء العلوي من الخلفية.

أسفل: سيتم وضع الصورة في الجزء السفلي من الخلفية.

• المركز: سيتم وضع الصورة في وسط الخلفية (افتراضيا).
• اليسار: سيتم وضع الصورة على يسار الخلفية.

إلى اليمين: سيتم وضع الصورة على يمين الخلفية.

3. خلفية ثابتة: يمكنك تحديد ما إذا كانت صورة الخلفية ستبقى ثابتة عند التمرير في الصفحة.

ثابت: سيتم إصلاح صورة الخلفية (لن تتحرك عند التمرير).

التمرير: ستتحرك صورة الخلفية مع التمرير (افتراضيا).

في ما يلي مثال على رمز يوضح إعداد الخلفية للصورة:

الجسم {

صورة الخلفية: رابط ("الخلفية.جبغ");

الخلفية-كرر: لا-كرر;

الخلفية-المنصب: المركز;

مرفق الخلفية: ثابت;

}

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

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

خاصية تلقائية: سيتم قياس حجم صورة الخلفية تلقائيا ، مع الحفاظ على نسبها الأصلية.

الغلاف: سيتم تحجيم صورة الخلفية بطريقة تغطي العنصر المحدد بالكامل. يمكن أن يتسبب ذلك في اقتصاص الصورة إذا كانت نسبة العرض إلى الارتفاع الأصلية لا تتطابق مع نسبة العرض إلى الارتفاع للعنصر.

تحتوي على: سيتم تحجيم صورة الخلفية بطريقة تتناسب تماما مع العنصر المحدد. يمكن أن يؤدي ذلك إلى إفراغ المساحات حول الصورة إذا كانت نسبة العرض إلى الارتفاع الأصلية لا تتطابق مع نسبة العرض إلى الارتفاع للعنصر.

الطول: يمكنك تعيين قيم محددة لعرض وارتفاع صورة الخلفية عن طريق تحديدها بالبكسل (على سبيل المثال ، حجم الخلفية: 500 بكسل 300 بكسل؛).

مثال على استخدام خاصية حجم الخلفية:

في هذا المثال ، صورة الخلفية هي " صورتك.جبغ " سيتم تحجيمها في مثل هذه الطريقة لتغطية تماما العنصر الذي يتم تعيين هذه الخاصية.

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

كيفية تعيين موضع صورة الخلفية

في أتش تي أم أل ، يمكنك تعيين موضع صورة الخلفية باستخدام خاصية موضع الخلفية. تتيح لك هذه الخاصية تحديد كيفية وضع الصورة بالنسبة لمنطقة الخلفية.

يمكن تعيين قيمة خاصية موضع الخلفية باستخدام كلمات رئيسية مثل اليسار أو اليمين أو الأعلى أو الأسفل أو الوسط أو في قيم النسبة المئوية أو البكسل.

على سبيل المثال ، لتعيين موضع الصورة في وسط الخلفية ، يمكنك استخدام رمز كس التالي:

الخلفية-المنصب: المركز;

• إذا كنت تفضل استخدام نسبة مئوية أو قيمة بكسل ، فيمكنك تحديد موضع أفقي ورأسي بالنسبة لمنطقة الخلفية.
• على سبيل المثال ، سيقوم رمز كس التالي بتعيين موضع الصورة في الجزء العلوي وفي وسط الخلفية:
• خلفية الموقف: 50% 0;
• يمكنك أيضا دمج قيم خاصية موضع الخلفية لإنشاء تأثيرات مختلفة. على سبيل المثال:

أعلى اليسار: ستتم محاذاة الصورة إلى الزاوية العلوية اليسرى من الخلفية.

أسفل اليمين: ستتم محاذاة الصورة إلى الزاوية اليمنى السفلية من الخلفية.

مركز الوسط: سيتم محاذاة الصورة إلى مركز الخلفية.

50% 50%: سيتم توسيط الصورة في الخلفية.

يمكن أن يساعدك تحديد موضع صورة الخلفية في إنشاء تأثيرات تصميم مثيرة للاهتمام على موقع الويب الخاص بك. جرب مجموعات مختلفة من قيم خاصية موضع الخلفية في التعليمات البرمجية الخاصة بك للعثور على الخيار الأنسب لمشروعك.

سؤال وجواب

كيف يمكنني وضع صورة على الخلفية في أتش تي أم أل?

لوضع صورة على خلفية في هتمل ، يمكنك استخدام كس الملكية الخلفية صورة. تحتاج إلى تحديد المسار إلى الصورة في قيمة هذه الخاصية ، على سبيل المثال: الخلفية-صورة: ورل("المسار إلى الصورة").

هل من الممكن استخدام صورة محلية كخلفية?

نعم ، يمكنك استخدام صورة محلية كخلفية. للقيام بذلك ، حدد المسار النسبي للصورة في قيمة خاصية صورة الخلفية.