وضع لون خلفية واحد | استخدام صورة كخلفية | إنشاء خلفية بتدرج لوني | ضبط خلفية متغيرة الألوان | 4 طرق
إذا كنت ترغب في إدراج لون خلفية لصفحة الويب بلغة ترميز HTML، سيكون عليك فقط إجراء تغيير سريع على عنصر 'body' بداخل وسوم <style></style>. تختلف الخطوات قليلًا حسب رغبتك في إظهار الخلفية. تعرَّف على كيفية تثبيت خلفية لصفحة الويب التي تقوم بإنشائها بلون أو صورة أو تدرج لوني أو رسوم متحركة متعددة الألوان.
الطريقه رقم 1 : وضع لون خلفية واحد
افتح ملف HTML بمحرر النصوص الذي تفضل استخدامه.
1
بدءًا من إصدار HTML5، لم تعد خاصية <bgcolor> معتمدة. ينبغي التعامل مع لون الخلفية، بالإضافة إلى جميع العناصر الأخرى المحددة لشكل صفحتك باستخدام لغة التنسيق CSS.[١] 
أضف الوسوم
2
ينبغي ترميز جميع المعلومات المحددة لشكل صفحتك (بما في ذلك لون الخلفية) ووضع الرموز بين هذه الوسوم. إذا كان لديك مجموعة من وسوم <style> مسبقًا، انتقل إلى هذا الجزء من الملف. <!DOCTYPE html> <html> <head> <style> </style> </head> </html>
اكتب عنصر 'body' داخل الوسوم
3
أي شيء ستقوم بتغييره في عنصر 'body' في لغة التنسيق CSS سيؤثر على الصفحة بأكملها. <!DOCTYPE html> <html> <head> <style> body { } </style> </head> <body> </body> </html>
أضف خاصية 'background-color' إلى عنصر 'body'.
4
في نص هذا السياق، هناك تهجئة واحدة فقط لكلمة 'لون' سوف تعمل بشكل صحيح، وهي: 'color'. <!DOCTYPE html> <html> <head> <style> body { background-color: } </style> </head> <body> </body> </html>
أضف لون الخلفية الذي ترغب به إلى خاصية 'background-color'.
5
يمكنك كتابة اسم اللون (green, blue, red, إلخ.), واستخدام الرموز بالنظام الست عشري (hex) المحدد للون الذي ترغب به (على سبيل المثال، #000000 لإضافة اللون الأسود، أو #ff0000 للأحمر، إلخ) أو عن طريق كتابة قيمة اللون المرغوب (مثل rgb(255,255,0) لإضافة اللون الأصفر). فيما يلي مثال على استخدام شفرة سداسية عشرية، ستجعل الخلفية بنفس لون شعار ويكي هاو: <!DOCTYPE html> <html> <head> <style> body { background-color: #93B874; } </style> </head> <body> </body> </html>
استخدم خاصية 'background-color' لوضع ألوان للخلفية على عناصر أخرى.
6
تمامًا كما فعلت لوضع لون على عنصر الجسم، يمكنك استخدام 'background-color' لتحديد خلفيات العناصر الأخرى. قم فقط بإضافة تلك العناصر بداخل <style></style> مع خاصية background-color.[٢] <!DOCTYPE html> <html> <head> <style> body { background-color: #93B874; } h1 { background-color: orange; } p { background-color: rgb(255,0,0); } </style> </head> <body> <h1>ستكون رأس هذه الصفحة بخلفية برتقالية</h1> <p>ستكون خلفية هذه الفقرة باللون الأحمر</p> </body> </html>
الطريقه رقم 2 : استخدام صورة كخلفية
افتح ملف HTML الذي تعمل عليه بمحرر نصوص.
1
يفضل العديد من الأشخاص استخدام صورة في خلفية موقعهم على الويب. سوف يسمح لك ذلك بتعيين خلفيتك في شكل نقش أو محاكاة لملمس أو صورة، أو أي نوع آخر من الأشكال المصورة. بدءًا من إصدار HTML5، ينبغي عليك تعيين جميع أنواع الخلفيات باستخدام لغة التنسيق CSS (صفحات الطرز المتراصة) داخل وسوم <style></style>.
أضف وسوم
2
ينبغي ترميز جميع المعلومات المحددة لشكل صفحتك (بما في ذلك لون الخلفية) ووضع الرموز بين هذه الوسوم. إذا كان لديك مجموعة من وسوم <style>، انتقل إلى هذا الجزء من الملف. <!DOCTYPE html> <html> <head> <style> </style> </head> </html>
اكتب عنصر 'body' داخل الوسوم
3
أي شيء ستقوم بتغييره في عنصر 'body' في لغة التنسيق CSS سيؤثر على الصفحة بأكملها. <!DOCTYPE html> <html> <head> <style> body { } </style> </head> <body> </body> </html>
أضف خاصية 'background- image' إلى عنصر ' body'.
4
عند إضافة هذه الخاصية، ستحتاج إلى اسم ملف الصورة التي ترغب باستخدامها. تأكد من تخزين ملف الصورة في نفس المجلد المخزن عليه ملف HTML (أو قم بإدخال مسار الملف بالكامل على خادم الويب الخاص بك).[٣] <!DOCTYPE html> <html> <head> <style> body { background-image: url('imagename.png'); background-color: #93B874; } </style> </head> <body> </body> </html>
رتب طبقات الصور.
5
يمكنك تجميع عدة صور فوق بعضها البعض. يمكن أن يكون ذلك مفيدًا إذا كنت تستخدم صورًا بخلفيات شفافة تكمل بعضها البعض عندما توضع في طبقات. <!DOCTYPE html> <html> <head> <style> body { background-image: url('image1.png'), url('image2.gif'); background-color: #93B874; } </style> </head> <body> </body> </html>
الطريقه رقم 3 : إنشاء خلفية بتدرج لوني
استخدم لغة التنسيق CSS لإنشاء خلفية بتدرج لوني.
1
إذا كنت تبحث عن خلفية أكثر تحديدًا من اللون الواحد، ولكن ليست مزدحمة كالرسوم المتحركة متعددة الألوان، جرِّب وضع لون متدرج في الخلفية. الألوان المتدرجة هي تلك الألوان التي تتدرج شيئًا فشيئًا لتتحول إلى ألوان أخرى. يمكنك استخدام لغة التنسيق CSS لإنشاء التدرج اللوني حسب رغبتك. قبل أن تجرب إنشاء تدرُّج لوني، تأكد من فهم أساسيات تصميم الصفحات باستخدام لغة التنسيق CSS.
اعرف كل ما يخصّ البنية الأساسية.
2
عند إنشاء التدرج اللوني، سينبغي عليك معرفة معلومتين ستحتاج إليهما: نقطة البداية وزاويتها والألوان التي سيتم التدرج بينها. يمكنك اختيار ألوان مختلفة ينتقل بينها التدرج اللوني، كما يمكنك تحديد اتجاه أو زاوية التدرج.[٤] background: linear-gradient(direction/angle, color1, color2, color3, etc.);
قم بإنشاء تدرج لوني يتجه عموديًا.
3
إذا لم تقم بتحديد اتجاه التدرج، فإنه سيتجه تلقائيًا من أعلى إلى أسفل. يختلف تنفيذ التدرج باختلاف المتصفحات وطريقة عمل التدرج عليها، لذلك سيكون عليك إدراج عدة إصدارات من الرموز البرمجية. <!DOCTYPE html> <html> <head> <style> html { min-height: 100%; /* يلزم ذلك لضمان امتداد التدرج في كامل الصفحة */ } body { background: -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: linear-gradient(#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); /* من اليسار إلى اليمين */ background: -o-linear-gradient(right, #93B874, #C9DCB9); /* ينتهي من اليمين */ background: -moz-linear-gradient(right, #93B874, #C9DCB9); /* ينتهي من اليمين */ background: linear-gradient(to right, #93B874, #C9DCB9); /* يتحرك إلى اليمين */ background-color: #93B874; /* قد يكون من المفيد تحديد لون للخلفية في حالة عدم تحميل التدرج اللوني */ } </style> </head> <body> </body> </html>
استخدم خصائص أخرى لضبط التدرج اللوني.
5
هناك الكثير من الطرق التي يمكنك بها التعامل مع التدرجات اللونية. - على سبيل المثال، لن يمكنك فقط إضافة أكثر من لونين، بل يمكنك أيضًا وضع نسبة مئوية لكل لون. سيتيح لك ذلك تحديد مقدار التباعد الذي تريد أن تكون عليه كل شريحة لونية.
background: linear-gradient(#93B874 10%, #C9DCB9 70%, #000000 90%);
الطريقه رقم 4 : ضبط خلفية متغيرة الألوان
انتقل إلى الجزء1إذا لم يناسبك وضع خلفية بلون واحد، حاول تجربة هذه الخلفية المتحركة المتغيرة الألوان. بدءًا من إصدار HTML5، ينبغي عليك تعيين لون الخلفية باستخدام لغة التنسيق CSS (صفحات الطرز المتراصة). إذا لم يكن لديك خبرة سابقة في ضبط لون خلفية باستخدام لغة التنسيق CSS، راجع خطوة 'وضع لون خلفية واحد' قبل تجربة هذه الطريقة.
أضف خاصية الرسوم المتحركة إلى العنصر 'body'.2سيتوجب عليك إضافة خاصيتين مختلفين، حيث أن الترميز يختلف باختلاف المتصفح. [٦]<!DOCTYPE html> <html> <head> <style> body { -webkit-animation: colorchange 60s infinite; animation: colorchange 60s infinite; } </style> </head> <body> </body> </html>
أضف الألوان التي ترغب بها إلى الرسوم المتحركة.3ستستخدم الآن معيار keyframes@ لتعيين ألوان الخلفية التي ستبدأ منها الحركة، بالإضافة إلى المدة الزمنية التي سيظهر فيها كل لون على الصفحة. يرجى مراعاة أنك ستحتاج إلى مدخلات مختلفة حسب اختلاف المتصفح.[٧]<!DOCTYPE html> <html> <head> <style> body { -webkit-animation: colorchange 60s infinite; animation: colorchange 60s infinite; } @-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>
تعليقات
إرسال تعليق