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