لا تعمل صورة الخلفية على الموقع على تحسين الإدراك البصري فحسب ، بل تساعد أيضا في خلق جو أو التأكيد على الموضوع أو التميز عن البقية. غالبا ما يواجه مطورو الويب مهمة تثبيت صورة على خلفية ، وفي هذه المقالة سننظر في إحدى الخصائص وقيمها التي تسمح لنا بتنفيذ ذلك دون مشاكل غير ضرورية.
الخلفية-الصورة هي خاصية تحدد صورة الخلفية لعنصر ما.
من أجل تعيين صورة السماء.جبغ على الخلفية ، تحتاج إلى تعيين المسار إلى الصورة في قيمة الخاصية صورة الخلفية. من الممكن استخدام المسارات النسبية والمطلقة. على سبيل المثال ، إذا كانت الصورة السماء.جبغ الموجود في مجلد الموقع ، فإن المسار النسبي تبدو مثل هذا:
الخلفية-صورة: رابط ("صور / السماء.جبغ");
إذا كانت الصورة السماء.يقع جبغ على المسار المطلق ، ثم تحتاج إلى تحديد المسار الكامل للملف. على سبيل المثال:
خلفية الصورة: رابط ("https://example.com/images/sky.jpg");
- إعداد صورة الخلفية السماء.جبغ
- الإعدادات المسبقة لتعيين صورة الخلفية
- اختيار وإعداد صورة الخلفية
- استخدام خاصية صورة الخلفية
- قيم محددة لخاصية صورة الخلفية
- تحديد حجم صورة الخلفية
- قواعد لتحديد المواقع صورة الخلفية
- نموذج التعليمات البرمجية لتعيين صورة الخلفية
- سؤال وجواب
- ما هي القيمة التي يجب استخدامها عند تعيين خاصية صورة الخلفية لتعيين الصورة على الخلفية?
إعداد صورة الخلفية السماء.جبغ
لتعيين صورة خلفية على صفحة ويب ، يجب عليك استخدام خاصية صورة خلفية كس. يتم تحديد المسار إلى الصورة كقيمة هذه الخاصية.
لتخصيص السماء صورة الخلفية.جبغ على صفحة الويب ، تحتاج إلى تنفيذ الخطوات التالية:
- ضع ملف صورة السماء.جبغ إلى نفس المجلد حيث توجد صفحة الويب.
- افتح ملف نمط كس المرتبط بصفحة الويب هذه.
- ابحث عن المحدد المسؤول عن تصميم نص صفحة الويب أو قم بإنشاء محدد جديد لهذا الغرض.
- أضف خاصية صورة الخلفية إلى المحدد وقم بتعيين قيمة سماء مسار الصورة.جي بي جي .
مثال:
}
- بعد الانتهاء من الخطوات المحددة ، صورة الخلفية السماء.جبغ سيتم تثبيته على صفحة الويب.
- ملاحظة: عند تثبيت صورة خلفية ، يوصى أيضا بتحديد طرق بديلة لعرض الخلفية ، بحيث إذا كانت الصورة غير متوفرة ، فلا يزال بإمكان المستخدم رؤية بعض العناصر المنمقة. للقيام بذلك ، يتم استخدام خصائص لون الخلفية وتكرار الخلفية.
- الإعدادات المسبقة لتعيين صورة الخلفية
قبل تثبيت صورة خلفية على صفحة ويب ، تحتاج إلى إجراء العديد من الإعدادات الأولية.
تحقق من وجود ملف صورة. تأكد من أن لديك ملف مع الصورة التي تريد استخدامها كصورة خلفية. تأكد من تحديد مسار الملف بشكل صحيح.
تحديد تنسيق الصورة. تحديد تنسيق ملف الصورة: الحياة السياسية في فرنسا (.جبغ) ، بابوا نيو غينيا (.بابوا نيو غينيا) ، جيف (.المتحركة) أو واحد آخر. يحدد تنسيق الملف العلامة التي يجب استخدامها لوضع الصورة على الصفحة.
حدد محدد كس المناسب. يمكنك استخدام محددات كس المختلفة لتعيين صورة الخلفية ، مثل محدد فئة أو محدد معرف أو محدد علامة. من المهم اختيار المحدد المناسب لحالتك.
- عند الانتهاء من هذه الإعدادات المسبقة ، يمكنك المتابعة إلى الخطوة التالية — تثبيت صورة الخلفية. في المستقبل ، سوف تحتاج إلى استخدام خاصية صورة الخلفية وقيمة محددة لذلك.
- اختيار وإعداد صورة الخلفية
- صورة الخلفية هي صورة يتم تعيينها على خلفية صفحة الويب. يمكن أن يعمل على خلق جو أو جذب الانتباه أو الحفاظ على أسلوب تصميم معين.
عند اختيار صورة خلفية لصفحة ويب ، يجب مراعاة عدة عوامل مهمة:
- النمط المناسب وموضوع الصورة. يجب أن تتطابق الخلفية مع النمط العام وموضوع صفحة الويب لخلق انطباع متناغم.
- القرار وحجم الصورة. يجب أن تتمتع صورة الخلفية بدقة كافية وأن تكون بالحجم المناسب بحيث تبدو جيدة على الأجهزة والشاشات المختلفة.
- ملف الأمثل. يجب تحسين صورة الخلفية لصفحة الويب لتقليل حجم الملف وتسريع وقت تحميل الصفحة.
- عند تحديد صورة الخلفية ، تحتاج إلى إعدادها للاستخدام في رمز هتمل. للقيام بذلك ، يمكنك استخدام الخصائص التالية:
صورة الخلفية: يحدد الصورة لاستخدامها كعنصر الخلفية.
حجم الخلفية: يحدد حجم صورة الخلفية. يمكنك استخدام قيم مثل "الغلاف" (إظهار الصورة بأكملها) ، أو "احتواء" (إظهار الصورة بأكملها في حاوية) ، أو تحديد أبعاد محددة بالبكسل أو النسب المئوية.
الخلفية-الموقف: يحدد موضع صورة الخلفية على الصفحة. يمكنك تحديد قيم محددة ، مثل" أعلى اليسار "أو" الوسط " ، أو استخدام الإحداثيات بالبكسل.
تكرار الخلفية: يحدد كيفية تكرار صورة الخلفية إذا كانت أصغر من حجم الحاوية. يمكنك استخدام القيم" كرر "(كرر أفقيا وعموديا) ، " كرر-س "(كرر أفقيا فقط) ، " كرر-ص "(كرر عموديا فقط) أو" لا تكرار " (لا تكرر).
على سبيل المثال ، لتعيين صورة خلفية السماء.جبغ يمكن استخدام شفرة هتمل التالية على خلفية صفحة ويب:
- في هذا المثال ، صورة الخلفية هي السماء.سيتم عرض جبغ إلى العرض الكامل وارتفاع الصفحة. سيتم توسيط الصورة ولن تتكرر.
- في الأنماط.ملف المغلق:
استخدام خاصية صورة الخلفية
تسمح لك خاصية صورة الخلفية بتعيين صورة كخلفية لعنصر هتمل.
لتعيين صورة السماء.جبغ كخلفية ، تحتاج إلى تعيين قيمة الخاصية صورة الخلفية:
على سبيل المثال ، يمكنك استخدام ورقة أنماط خارجية:
الجسم {
الخلفية-صورة: رابط ("السماء.جبغ ");
}
أو يمكنك استخدام الأنماط المضمنة:
لاحظ أن المسار إلى ملف الصورة محدد داخل وظيفة ورل () ويمكن أن يكون نسبيا أو مطلقا.
يمكنك أيضا استخدام قيم أخرى لخاصية صورة الخلفية ، مثل التدرج الخطي أو التدرج الشعاعي ، لإنشاء خلفية باستخدام التدرج اللوني.
ولكن لا ننسى أن الصورة يجب أن تكون متاحة من قبل المسار المحدد من أجل عرض بشكل صحيح على خلفية عنصر هتمل.
نتيجة لذلك ، من خلال تحديد خاصية صورة الخلفية وقيمتها ، يمكننا تعيين صورة السماء.جبغ كخلفية لعنصر هتمل.
قيم محددة لخاصية صورة الخلفية
صورة الخلفية هي خاصية كس التي تسمح لك لتعيين صورة كخلفية لعنصر معين. يمكن تمثيل القيم التي يمكن استخدامها لخاصية صورة الخلفية بأنواع بيانات مختلفة.
عنوان ورل للصورة:
يمكن أن تكون قيمة خاصية صورة الخلفية عنوان ورل بسيط للصورة ، مما يشير إلى موقعها على الشبكة. على سبيل المثال:
خلفية الصورة: رابط ("https://example.com/images/sky.jpg");
المسار إلى الملف على الخادم:
يمكنك تحديد المسار إلى الصورة بالنسبة إلى الدليل الجذر للخادم أو بالنسبة إلى الدليل الحالي. على سبيل المثال:
الخلفية-صورة: رابط ("/صور / السماء.جبغ");
خلفية الصورة: رابط ("../ صور / سماء.جبغ");
التدرج الخطي:
بدلا من الصورة ، يمكنك استخدام تدرج خطي محدد باستخدام الكلمة الرئيسية ذات التدرج الخطي. باستخدام هذه القيمة ، يمكنك إنشاء انتقال سلس بين الألوان أو استخدام نقاط توقف متعددة للألوان. على سبيل المثال:
صورة الخلفية: التدرج الخطي (إلى الأسفل ، الأحمر ، الأزرق);
التدرج الشعاعي:
يمكنك أيضا استخدام التدرج الشعاعي المحدد باستخدام الكلمة الرئيسية التدرج الشعاعي. يتيح لك ذلك إنشاء تأثيرات تشبه التوهج أو مصدر الضوء. على سبيل المثال:
صورة الخلفية: شعاعي التدرج (دائرة ، أصفر ، برتقالي);
التدرج الخطي أو الشعاعي ، مع مراعاة الزاوية:
إذا كنت بحاجة إلى تحديد زاوية لتدرج خطي أو شعاعي ، فيمكنك استخدام الكلمات الرئيسية:
صورة الخلفية: التدرج الخطي (45 درجة ، أحمر ، أزرق);
صورة الخلفية: شعاعي التدرج (القطع الناقص في المركز والأصفر والبرتقالي);
قيم إضافية:
يمكنك أيضا استخدام قيم إضافية لخاصية صورة الخلفية ، مثل التدرج المدمج (على سبيل المثال ، التدرج اللوني مع صورة) ، والخلفيات المتعددة (عدة خلفيات من أنواع مختلفة) ، وغيرها. يتم استخدام وظائف وكلمات رئيسية إضافية لهذه القيم.
- توضح هذه المقالة بعض القيم المحددة لخاصية صورة الخلفية. حدد القيم الأكثر ملاءمة اعتمادا على التأثير المرئي المطلوب.
- تحديد حجم صورة الخلفية
- لتعيين حجم صورة الخلفية على صفحة ويب ، يمكنك استخدام الخاصية كس حجم الخلفية. تتيح لك هذه الخاصية التحكم في حجم صورة الخلفية وموقعها على الصفحة.
- يمكن تعيين قيم خاصية حجم الخلفية بالتنسيقات التالية:
تظل أحجام الصور التلقائية دون تغيير;
| الغلاف-يتم تمديد الصورة أو ضغطها بحيث تغطي منطقة الخلفية بالكامل ، وربما اقتصاصها; | تحتوي على-يتم تمديد الصورة أو ضغطها بحيث تتناسب تماما مع منطقة الخلفية مع الحفاظ على نسب الصورة; |
الطول-يحدد حجم الصورة بالبكسل أو النسب المئوية أو القيم المقبولة الأخرى.
على سبيل المثال ، لتعيين حجم صورة خلفية السماء.جبغ على صفحة ويب ، يمكنك استخدام التعليمات البرمجية كس التالية:
حجم الخلفية:
100% 100%;
في هذا المثال ، سيتم تمديد عرض وارتفاع صورة الخلفية بنسبة 100 ٪ من عرض وارتفاع منطقة الخلفية.
- وبالتالي ، باستخدام خاصية حجم الخلفية ، يمكنك بسهولة التحكم في حجم ورؤية صورة الخلفية على صفحة الويب.
- قواعد لتحديد المواقع صورة الخلفية
- عند استخدام خاصية صورة الخلفية في كس لتعيين صورة خلفية على عنصر صفحة ويب ، يمكنك أيضا تعيين عدة قواعد لوضع هذه الصورة.
تتيح لك الخصائص التالية مراعاة حجم وموضع الصورة على الشاشة:
| الخلفية-الموقف: يحدد موضع صورة الخلفية بالنسبة للعنصر. يمكن أن تأخذ قيما مثل القيم العلوية أو السفلية أو اليسرى أو اليمنى أو المجمعة باستخدام وحدات البكسل أو النسب المئوية. | حجم الخلفية: يحدد حجم صورة الخلفية. يمكنك تحديد قيم مثل الغلاف (يزيد حجم الصورة أو ينقص تلقائيا بحيث تملأ العنصر المحدد تماما) ، أو تحتوي على (يتم ضغط الصورة أو توسيعها بحيث تتناسب تماما مع العنصر المحدد). |
|---|---|
| مثال على استخدام هذه الخصائص: |
| الوصف |
| سيتم وضع الصورة في وسط العنصر. |
حجم الخلفية: غطاء;
سيتم تحجيم الصورة واقتصاصها لملء العنصر بالكامل.
الخلفية-كرر: لا-كرر;
لن تتكرر الصورة وسيتم عرضها مرة واحدة فقط في العنصر.
باستخدام هذه القواعد لتحديد موقع صورة الخلفية ، يمكنك تحقيق التأثير المطلوب وتصميم صفحة الويب الخاصة بك بشكل جميل.
نموذج التعليمات البرمجية لتعيين صورة الخلفية
لتعيين صورة خلفية على صفحة ويب ، يمكنك استخدام صورة خلفية خاصية كس. نموذج التعليمات البرمجية لتثبيت صورة " السماء.جبغ " على الخلفية:
يستخدم هذا المثال نمط كس لعنصر الجسم ، وهو العنصر الجذر لصفحة الويب. تحدد خاصية صورة الخلفية المسار إلى الصورة " السماء.جبغ " باستخدام وظيفة ورل (). تحدد خاصية حجم الخلفية حجم الصورة وفقا لحجم نافذة المتصفح باستخدام قيمة الغلاف. تمنع خاصية تكرار الخلفية الصورة من التكرار على الخلفية باستخدام قيمة عدم التكرار.