كيف يمكنني جعل الخلفية على الموقع ثابتة? طرق بسيطة وفعالة

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

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

الجسم {

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

 حجم الخلفية: غطاء;

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

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

}

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

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

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

 حجم الخلفية: غطاء;

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

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

}

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

كيف يمكنني تجميد الخلفية على موقع على شبكة الانترنت? سهلة وفعالة

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

1. باستخدام خلفية الملكية المغلق-مرفق: ثابت;

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

مثال:

2. باستخدام موضع عنصر ثابت

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

مثال:

3. باستخدام العنصر الزائف:: بعد

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

مثال:

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

المغلق خلفية ثابتة هو حل بسيط

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

مثال على نمط لخلفية ثابتة:

.ثابت-بغ {

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

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

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

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

حجم الخلفية: غطاء;

}

في هذا المثال ، نقوم بإنشاء فئة تسمى" ثابت-بغ " وتطبيق أنماط عليه لتعيين صورة الخلفية. سيتم إرفاق الخلفية بإطار العرض ولن يتم التمرير مع محتويات الصفحة.

من المهم أن نلاحظ أن اسم الصورة والمسار إليها ('الصور / الخلفية.جبغ') يجب أن تتكيف مع موقع الويب الخاص بك. تأكد من أن الصورة في المجلد الصحيح وأن المسار الصحيح لها محدد.

لتطبيق هذا النمط على عنصر في الصفحة ، أضف فئة" ثابت-بغ " إلى علامة العنصر:

بعض النص

في هذا المثال ، نستخدم علامة

، ولكن يمكنك أيضا استخدام هذا النمط مع علامات أخرى مثل أو .

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

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

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

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

هنا هو رمز كس عينة من شأنها أن تسمح لك لاستخدام هذه التقنية:

الجسم {

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

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

حجم الخلفية: غطاء;

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

}

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

ولكن الأهم من ذلك ، وضعنا مرفق الخلفية: ثابت لجعل صورة الخلفية ثابتة.

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

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

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

1. اختيار صورة الخلفية الصحيحة

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

3. هناك العديد من العوامل الرئيسية التي يجب مراعاتها عند اختيار صورة الخلفية:

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

نظام الألوان: يجب دمج صورة الخلفية بشكل متناغم مع بقية عناصر الموقع. يوصى باختيار الصور ذات الألوان المحايدة والممتعة التي لا تصرف الانتباه عن المحتوى.

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

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

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

تثبيت العناصر الزائفة:: قبل و:: بعد

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

هنا مثال بسيط على استخدام عنصر زائف:: قبل:

محتوى العنصر

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

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

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

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

يمكن أن تكون القيمة:

الممتلكات

المعنى

الجسم

حجم الخلفية

الغلاف

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

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

استخدام جافا سكريبت لخلفية ثابتة

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

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

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

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

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

استخدام الإضافات لإصلاح خلفية الموقع

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

1. مسج المنظر

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

2. ممتاز.شبيبة

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

3. سكرولماجيك

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

4. صفحة كاملة.شبيبة

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

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

سؤال وجواب

كيف يمكنني جعل الخلفية على الموقع ثابتة?

من أجل جعل الخلفية على الموقع ثابتة ، يمكنك استخدام خاصية كس الخلفية المرفق وتعيين قيمته كما ثابتة. هنا هو رمز المثال: الجسم { الخلفية-صورة: ورل ('الخلفية.جبغ ') ؛ الخلفية-مرفق: ثابت؛}

ما قيمة مرفق الخلفية التي يجب أن أستخدمها لجعل الخلفية ثابتة?

من أجل جعل الخلفية ثابتة ، تحتاج إلى تعيين قيمة مرفق الخلفية على أنها ثابتة. على سبيل المثال: الجسم { الخلفية-صورة: ورل('الخلفية.جبغ ') ؛ الخلفية-مرفق: ثابت؛}

هل من الممكن جعل بعض عناصر الخلفية ثابتة فقط?