المحتوى

• لتخطو
• الطريقة 1 من 4: تعيين لون خلفية خالص
• الطريقة 2 من 4: استخدام صورة كخلفية
• الطريقة الثالثة من 4: إنشاء خلفية متدرجة
• الطريقة الرابعة من 4: قم بتعيين رسم متحرك ملون كخلفية

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

لتخطو

الطريقة 1 من 4: تعيين لون خلفية خالص

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

   ! DOCTYPE html> html> head> style> / style> / head> / html>

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

   ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

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

   ! DOCTYPE html> html> head> style> body {background-color:} / style> / head> body> / body> / html>

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

   ! DOCTYPE html> html> head> style> body {background-color: # 93B874؛ } / style> / head> body> / body> / html>

   • أبيض: #FFFFFF
   • وردي فاتح: # FFCCE6
   • أحرقت سيينا: #993300
   • نيلي - # 4B0082
   • البنفسجي - # EE82EE
   • تحقق من w3schools.com HTML Color Picker للعثور على الرموز السداسية لأي لون تريده.
6. استخدم "لون الخلفية" لتطبيق ألوان الخلفية على عناصر أخرى. تمامًا مثلما تقوم بتعيين عنصر الجسم ، يمكنك استخدام لون الخلفية لتعيين خلفيات العناصر الأخرى. ما عليك سوى وضع هذه العناصر داخل ملف النمط> / النمط> مع خاصية لون الخلفية.

   ! DOCTYPE html> html> head> style> body {background-color: # 93B874؛ } h1 {لون الخلفية: برتقالي؛ } p {background-color: rgb (255،0،0)؛ } / style> / head> body> h1> هذا الرأس يحصل على خلفية برتقالية / h1> p> هذه الفقرة تحصل على خلفية حمراء / p> / body> / html>

الطريقة 2 من 4: استخدام صورة كخلفية

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

   ! DOCTYPE html> html> head> style> / style> / head> / html>

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

   ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

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

   ! DOCTYPE html> html> head> style> body {background-image: url ("imagename.png")؛ لون الخلفية: # 93B874 ؛ } / style> / head> body> / body> / html>

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

   ! DOCTYPE html> html> head> style> body {background-image: url ("image1.png")، url ("image2.gif")؛ لون الخلفية: # 93B874 ؛ } / style> / head> body> / body> / html>

   • الصورة الأولى في الأعلى. الصورة الثانية أسفل الأولى.

الطريقة الثالثة من 4: إنشاء خلفية متدرجة

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

   الخلفية: التدرج الخطي (الاتجاه / الزاوية ، اللون 1 ، اللون 2 ، اللون 3 ، إلخ) ؛

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

   ! DOCTYPE html> html> head> style> html {min-height: 100٪؛ / * هذا مطلوب للتأكد من أن التدرج يمتد على الصفحة بالكامل * /} الجسم {الخلفية: -webkit-linear-gradient (# 93B874، # C9DCB9)؛ / * Chrome 10+ ، Safari 5.1+ * / background: -o-linear-gradient (# 93B874 ، # C9DCB9) ؛ / * Opera 11.1+ * / background: -moz-linear-gradient (# 93B874 ، # C9DCB9) ؛ / * Firefox 3.6+ * / background: تدرج خطي (# 93B874 ، # C9DCB9) ؛ / * بناء الجملة الافتراضي (يجب أن يكون أخيرًا) * / background-color: # 93B874 ؛ / * من الجيد تعيين لون الخلفية ، في حالة عدم تحميل التدرج اللوني * /} / style> / head> body> / body> / html>

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

   ! DOCTYPE html> html> head> style> html {min-height: 100٪؛ } body {background: -webkit-linear-gradient (left، # 93B874، # C9DCB9)؛ / * من اليسار إلى اليمين * / الخلفية: -o-linear-gradient (right، # 93B874، # C9DCB9)؛ / * النهاية على اليمين * / الخلفية: -moz-linear-gradient (right، # 93B874، # C9DCB9)؛ / * النهاية على اليمين * / الخلفية: التدرج الخطي (إلى اليمين ، # 93B874 ، # C9DCB9) ؛ / * ينتقل إلى الجانب الأيمن * / لون الخلفية: # 93B874 ؛ / * من الجيد تعيين لون الخلفية ، في حالة عدم تحميل التدرج اللوني * /} / style> / head> body> / body> / html>

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

     الخلفية: التدرج الخطي (# 93B874 10٪ ، # C9DCB9 70٪ ، # 000000 90٪) ؛

   • أضف الشفافية إلى الألوان. مع هذا يمكنك أن تتلاشى الألوان. استخدم نفس اللون لتتلاشى من اللون إلى لا شيء. سوف تحب الوظيفة rgba () يجب أن تستخدم للإشارة إلى اللون. تحدد القيمة النهائية درجة الشفافية: 0 لمعتمة و 1 للشفافية.

     الخلفية: التدرج الخطي (إلى اليمين ، rgba (147.184.116.0) ، rgba (147.184.116.1)) ؛

الطريقة الرابعة من 4: قم بتعيين رسم متحرك ملون كخلفية

1. انتقل إلى نمط> في كود HTML الخاص بك. إذا وجدت لونًا صلبًا للخلفية ولكنك لم تجده ، فجرّب تغيير الخلفيات الملونة. من HTML 5 ، يجب تحديد ألوان الخلفية باستخدام CSS (أوراق الأنماط المتتالية). إذا لم تقم أبدًا بتعيين لون الخلفية باستخدام CSS ، فاقرأ القسم الخاص بتعيين لون خلفية خالص قبل تجربة هذه الطريقة.
2. أضف العقار الرسوم المتحركة لعنصر "الجسم". سيتعين عليك إضافة خاصيتين مختلفتين ، حيث يتطلب كل متصفح رمزًا مختلفًا.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s infinite؛ الرسوم المتحركة: Colorchange 60s لانهائية ؛ } / style> / head> body> / body> / html>

   • -webkit- الرسوم المتحركة الخاصية مطلوبة للمتصفحات التي تستند إلى Chrome (Chrome ، Opera ، Safari). الرسوم المتحركة هو المعيار لجميع المتصفحات الأخرى.
   • تغيير اللون هو ما يسمى بالرسوم المتحركة في هذا المثال.
   • 60 ثانية هي المدة (60 ثانية) من الرسوم المتحركة / الانتقال. تأكد من تعيين هذا لكل من webkit والبنية الافتراضية.
   • لانهائي يشير إلى أن الحركة يجب أن تتكرر إلى أجل غير مسمى. إذا كنت تفضل تكرار الألوان ثم التوقف عند اللون الأخير ، يمكنك حذف هذا الجزء.
3. أضف الألوان إلى الرسوم المتحركة الخاصة بك. أنت الآن بصدد استخدام قاعدة keyframes @ لتعيين ألوان الخلفية لتستمر ، بالإضافة إلى المدة التي يمكن فيها رؤية كل لون على الصفحة. مرة أخرى ، سيتعين عليك إضافة ترميزات متعددة للمتصفحات المختلفة.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s infinite؛ الرسوم المتحركة: Colorchange 60s لانهائية ؛ } @ -webkit-keyframes colorchange {0٪ {background: # 33FFF3؛} 25٪ {background: # 78281F؛} 50٪ {background: # 117A65؛} 75٪ {background: # DC7633؛} 100٪ {background: # 9B59B6؛}}keyframes colorchange {0٪ {background: # 33FFF3؛} 25٪ {background: # 78281F؛} 50٪ {background: # 117A65؛} 75٪ {background: # DC7633؛} 100٪ {background: # 9B59B6؛}} / style> / head> body> / body> / html>

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