إذا كنت تريد تضمين لون خلفية لصفحة ويب بتنسيق HTML، فكل ما عليك فعله هو إجراء تغيير سريع على عنصر “النص الأساسي” داخل

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

خطوات

عيِّن لونًا واحدًا للخلفية

1. 1 افتح ملف HTML باستخدام محرر النصوص الذي تفضل استخدامه. اعتبارًا من HTML5، فإن ملف الخاصية لم تعد مدعومة. يجب التعامل مع لون الخلفية بالإضافة إلى جميع العناصر الأخرى لمظهر صفحتك باستخدام CSS. X مصدر البحث

2. 2 أضف

   العلامات إلى ملفك. يجب ترميز جميع المعلومات الخاصة بمظهر صفحتك (بما في ذلك لون الخلفية) وترميزها بين هذه العلامات. إذا كان لديك بالفعل مجموعة من

3. 3 اكتب "جسم" داخل

   بطاقة شعار. سيؤثر أي شيء تقوم بتغييره في عنصر "النص الأساسي" في CSS على الصفحة بأكملها.

4. 4 أضف خاصية "background-color" إلى عنصر "body". في نص السياق هذا، ستعمل تهجئة واحدة فقط للكلمة "color" بشكل صحيح "color".

5. 5 أضف لون الخلفية الذي تريده إلى خاصية "لون الخلفية". يمكنك كتابة اسم اللون (أخضر، أزرق، أحمر ... قيمة اللون المطلوبة (مثل rgb (255،255،0) لإضافة اللون الأصفر). فيما يلي مثال على استخدام الشفرة السداسية العشرية التي ستجعل الخلفية بنفس لون شعار wikiHow

   • الأبيض #FFFFFF
   • وردي فاتح # FFCCE6
   • محروق براون # 993300
   • النيلي - # 4B0082
   • البنفسجي - # EE82EE
   • انظر للعثور على الرموز السداسية لأي لون.

6. 6 استخدم خاصية "background-color" لوضع ألوان الخلفية على عناصر أخرى. تمامًا كما فعلت لوضع لون على عنصر الجسم، يمكنك استخدام "لون الخلفية" لتعيين خلفيات العناصر الأخرى. فقط أضف تلك العناصر بالداخل

   مع خاصية لون الخلفية. X مصدر البحث

   سيكون رأس هذه الصفحة بخلفية برتقالية

   ستكون خلفية هذه الفقرة باللون الأحمر

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

1. 1 افتح ملف HTML الذي تعمل عليه باستخدام محرر نصوص. يفضل العديد من الأشخاص استخدام صورة في خلفية موقعهم على الويب. سيسمح لك ذلك بتعيين الخلفية في شكل نمط أو محاكاة نسيج أو صورة أو أي نوع آخر من الرسوم. بدءًا من إصدار HTML5، يجب عليك تعيين جميع أنواع الخلفيات باستخدام CSS (أوراق الأنماط المتتالية) داخل

   العلامات.

2. 2 إضافة

   العلامات إلى ملف HTML الذي تعمل عليه. يجب ترميز جميع المعلومات الخاصة بمظهر صفحتك (بما في ذلك لون الخلفية) وترميزها بين هذه العلامات. إذا كان لديك مجموعة من

3. 3 اكتب "جسم" داخل

   بطاقة شعار. سيؤثر أي شيء تقوم بتغييره في عنصر "النص الأساسي" في CSS على الصفحة بأكملها.

4. 4 أضف خاصية "background-image" إلى عنصر "body". عند إضافة هذه الميزة، ستحتاج إلى اسم ملف الصورة الذي تريد استخدامه. تأكد من تخزين ملف الصورة في نفس المجلد مثل ملف HTML (أو أدخل مسار الملف بالكامل على خادم الويب الخاص بك). X مصدر البحث

   • من المفيد أيضًا إضافة خاصية لون الخلفية، فقط في حالة عدم تحميل صورة الخلفية.

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

   • ستظهر الصورة الأولى التي تدخلها في المقدمة. الصورة الثانية تظهر خلف الصورة الأولى ... وهكذا.

قم بإنشاء خلفية متدرجة

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

2. 2 تعلم كل شيء عن البنية التحتية. عند إنشاء التدرج اللوني، ستحتاج إلى معرفة جزأين من المعلومات التي ستحتاجها نقطة البداية والزاوية، والألوان التي سيكون التدرج بينهما. يمكنك اختيار ألوان مختلفة للتنقل بين التدرج، ويمكنك أيضًا تحديد اتجاه التدرج أو زاويته. خلفية مصدر البحث X التدرج الخطي (الاتجاه / الزاوية، اللون 1، اللون 2، اللون 3، إلخ) ؛

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

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

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

   • على سبيل المثال لا يمكنك فقط إضافة أكثر من لونين، بل يمكنك أيضًا وضع نسبة مئوية لكل لون. سيسمح لك ذلك بتحديد مقدار التباعد الذي تريده لكل شريحة لونية. الخلفية التدرج الخطي (# 93B874 10٪، # C9DCB9 70٪، # 000000 90٪) ؛
   • أضف درجة الشفافية المرغوبة إلى ألوانك. سيؤدي ذلك إلى تلاشي اللون تدريجيًا. استخدم نفس اللون للتدرج من هذا اللون إلى الشفافية. ستحتاج إلى استخدام خاصية rgba () لتحديد اللون. حيث تحدد القيمة النهائية درجة الشفافية يستخدم 0 لقيمة اللون الكامل ويستخدم 1 للشفافية. الخلفية التدرج الخطي (إلى اليمين، rgba (147،184،116،0)، rgba (147،184،116،1)) ؛

ضبط لون الخلفية المتغير

1. 1 انتقل إلى

   • -webkit-animation هي ميزة مطلوبة لمتصفحات المصدر المفتوح (Google Chrome، Opera، Safari). بينما الرسوم المتحركة هي الميزة القياسية لجميع المتصفحات الأخرى.

   • Colorchange هو ما نسميه الرسوم المتحركة في هذا المثال.

   • 60s هي مدة الحركة / الإجراء (60 ثانية). تأكد من ضبطه في كل من webkit والبنية القياسية.

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

2. 3 أضف الألوان التي تريدها إلى الرسوم المتحركة. ستستخدم الآن معيارkeyframes لتعيين ألوان الخلفية التي تبدأ منها الرسوم المتحركة، بالإضافة إلى المدة التي سيظهر فيها كل لون على الصفحة. يرجى أن تضع في اعتبارك أنك ستحتاج إلى مدخلات مختلفة اعتمادًا على المتصفح. X مصدر البحث

   • لاحظ أن معياري (@ -webkit-keyframes وkeyframes لهما نفس ألوان الخلفية والنسب المئوية، لذلك سيتعين عليك توحيد الطريقة حتى تعمل بنفس الطريقة على جميع المتصفحات.
   • النسب المئوية (0٪، 25٪، إلخ.) من إجمالي مدة الرسوم المتحركة (60 ثانية). عندما يتم تحميل الصفحة، ستكون الخلفية هي اللون المحدد بنسبة 0٪ (# 33FFF3). بمجرد تشغيل الرسوم المتحركة لمدة 25٪ من إجمالي 60 ثانية، ستتحول الخلفية إلى # 78281F، وهكذا.
   • يمكنك ضبط الوقت والألوان حتى تصل إلى النتيجة المرجوة.