تنزيل المقال
تنزيل المقال
إذا كنت ترغب في إدراج لون خلفية لصفحة الويب بلغة ترميز HTML، كل ما ليك هو إجراء تغيير سريع على عنصر "body" بداخل وسوم <style></style> . تختلف الخطوات قليلًا حسب رغبتك في إظهار الخلفية؛ تعرَّف على كيفية تثبيت خلفية لصفحة الويب التي تقوم بإنشائها بلون أو صورة أو تدرج لوني أو رسوم متحركة متعددة الألوان.
الخطوات
-
افتح ملف HTML بمحرر النصوص الذي تفضل استخدامه. بدءًا من إصدار HTML5، لم تعد خاصية <bgcolor> معتمدة. ينبغي التعامل مع لون الخلفية بالإضافة إلى جميع العناصر الأخرى المحددة لشكل صفحتك باستخدام لغة التنسيق CSS. [١] X مصدر بحثي
-
أضف الوسوم <style></style> إلى ملفك. ينبغي ترميز جميع المعلومات المحددة لشكل صفحتك (بما في ذلك لون الخلفية) ووضع الرموز بين هذه الوسوم. إذا كان لديك مجموعة من وسوم <style> مسبقًا، انتقل إلى هذا الجزء من الملف.
<! DOCTYPE html > < html > < head > < style > </ style > </ head > </ html >
-
اكتب عنصر "body" داخل الوسوم <style></style> . أي شيء ستغيره في عنصر "body" في لغة التنسيق CSS سيؤثر على الصفحة بأكملها.
<! DOCTYPE html > < html > < head > < style > body { } </ style > </ head > < body > </ body > </ html >
-
أضف خاصية "background-color" إلى عنصر "body". في نص هذا السياق، هناك تهجئة واحدة فقط لكلمة "لون" سوف تعمل بشكل صحيح، وهي: "color".
<! DOCTYPE html > < html > < head > < style > body { background-color : } </ style > </ head > < body > </ body > </ html >
-
أضف لون الخلفية الذي ترغب به إلى خاصية "background-color". يمكنك كتابة اسم اللون ( green , blue , red , إلخ.), واستخدام الرموز بالنظام الست عشري (hex) المحدد للون الذي ترغب به (على سبيل المثال، #000000 لإضافة اللون الأسود، أو #ff0000 للأحمر، إلخ) أو عن طريق كتابة قيمة اللون المرغوب (مثل rgb(255,255,0) لإضافة اللون الأصفر). فيما يلي مثال على استخدام شفرة سداسية عشرية ستجعل الخلفية بنفس لون شعار ويكي هاو:
<! DOCTYPE html > < html > < head > < style > body { background-color : #93B874 ; } </ style > </ head > < body > </ body > </ html >
- أبيض: #FFFFFF
- وردي فاتح: #FFCCE6
- بني محروق: #993300
- نيلي - #4B0082
- بنفسجي - #EE82EE
- راجع w3schools.com HTML Color Picker للعثور على رموز ست عشرية لأي لون.
-
استخدم خاصية "background-color" لوضع ألوان للخلفية على عناصر أخرى. تمامًا كما فعلت لوضع لون على عنصر الجسم، يمكنك استخدام "background-color" لتحديد خلفيات العناصر الأخرى. قم فقط بإضافة تلك العناصر بداخل <style></style> مع خاصية background-color. [٢] X مصدر بحثي
<! 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 >
-
افتح ملف HTML الذي تعمل عليه بمحرر نصوص. يفضل العديد من الأشخاص استخدام صورة في خلفية موقعهم على الويب. سوف يسمح لك ذلك بتعيين خلفيتك في شكل نقش أو محاكاة لملمس أو صورة، أو أي نوع آخر من الأشكال المصورة. بدءًا من إصدار HTML5، ينبغي عليك تعيين جميع أنواع الخلفيات باستخدام لغة التنسيق CSS (صفحات الطرز المتراصة) داخل وسوم <style></style> .
-
أضف وسوم <style></style> إلى ملف HTML الذي تعمل عليه. ينبغي ترميز جميع المعلومات المحددة لشكل صفحتك (بما في ذلك لون الخلفية) ووضع الرموز بين هذه الوسوم. إذا كان لديك مجموعة من وسوم <style> ، انتقل إلى هذا الجزء من الملف.
<! DOCTYPE html > < html > < head > < style > </ style > </ head > </ html >
-
اكتب عنصر "body" داخل الوسوم <style></style> . أي شيء ستغيره في عنصر "body" في لغة التنسيق CSS سيؤثر على الصفحة بأكملها.
<! DOCTYPE html > < html > < head > < style > body { } </ style > </ head > < body > </ body > </ html >
-
أضف خاصية "background- image" إلى عنصر " body". عند إضافة هذه الخاصية، ستحتاج إلى اسم ملف الصورة التي ترغب باستخدامها. تأكد من تخزين ملف الصورة في نفس المجلد المخزن عليه ملف HTML (أو قم بإدخال مسار الملف بالكامل على خادم الويب الخاص بك). [٣] X مصدر بحثي
<! DOCTYPE html > < html > < head > < style > body { background-image : url ( "imagename.png" ); background-color : #93B874 ; } </ style > </ head > < body > </ body > </ html >
- كما أنه من المفيد إضافة خاصية background-color ، فقط في حالة عدم تحميل صورة الخلفية.
-
رتب طبقات الصور. يمكنك تجميع عدة صور فوق بعضها البعض. يمكن أن يكون ذلك مفيدًا إذا كنت تستخدم صورًا بخلفيات شفافة تكمل بعضها بعضًا عندما توضع في طبقات.
<! DOCTYPE html > < html > < head > < style > body { background-image : url ( "image1.png" ), url ( "image2.gif" ); background-color : #93B874 ; } </ style > </ head > < body > </ body > </ html >
- ستظهر أول صورة تقوم بإدخالها في المقدمة. وتظهر الصورة الثانية خلف الصورة الأولى ... وهكذا.
-
استخدم لغة التنسيق CSS لإنشاء خلفية بتدرج لوني. إذا كنت تبحث عن خلفية أكثر تحديدًا من اللون الواحد ولكن ليست مزدحمة كالرسوم المتحركة متعددة الألوان، جرِّب وضع لون متدرج في الخلفية. الألوان المتدرجة هي تلك الألوان التي تتدرج شيئًا فشيئًا لتتحول إلى ألوان أخرى. يمكنك استخدام لغة التنسيق CSS لإنشاء التدرج اللوني حسب رغبتك. قبل أن تجرب إنشاء تدرُّج لوني، تأكد من فهم أساسيات تصميم الصفحات باستخدام لغة التنسيق CSS.
-
اعرف كل ما يخصّ البنية الأساسية. عند إنشاء التدرج اللوني، سينبغي عليك معرفة معلومتين ستحتاج إليهما: نقطة البداية وزاويتها والألوان التي سيتم التدرج بينها. يمكنك اختيار ألوان مختلفة ينتقل بينها التدرج اللوني، كما يمكنك تحديد اتجاه أو زاوية التدرج. [٤] X مصدر بحثي
background : linear-gradient ( direction / angle , color1 , color2 , color3 , etc .);
-
أنشئ تدرجًا لونيًا يتجه عموديًا. إذا لم تحدد اتجاه التدرج فإنه سيتجه تلقائيًا من أعلى إلى أسفل. يختلف تنفيذ التدرج باختلاف المتصفحات وطريقة عمل التدرج عليها، لذلك سيكون عليك إدراج عدة إصدارات من الرموز البرمجية.
<! 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 >
-
قم بتحديد اتجاه التدرج. سيؤدي تحديد اتجاه التدرج إلى تغيير الطريقة التي يظهر بها تغيُّر اللون. لاحظ أن طريقة تعريف الاتجاه تختلف باختلاف المتصفح. غير أن جميع الطرق ستؤدي إلى نفس التدرج. [٥] X مصدر بحثي
<! 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 >
-
استخدم خصائص أخرى لضبط التدرج اللوني. هناك الكثير من الطرق التي يمكنك بها التعامل مع التدرجات اللونية.
- على سبيل المثال: لن يمكنك فقط إضافة أكثر من لونين، بل يمكنك أيضًا وضع نسبة مئوية لكل لون. سيتيح لك ذلك تحديد مقدار التباعد الذي تريد أن تكون عليه كل شريحة لونية.
background : linear-gradient ( # 93B874 10 %, # C9DCB9 70 %, # 000000 90 %);
- أضف درجة الشفافية المرغوبة إلى ألوانك. سيؤدي ذلك إلى تلاشي اللون تدريجيًا. استخدم اللون نفسه لتنفيذ التدرج من ذلك اللون إلى الشفافية. ستحتاج إلى استخدام خاصية rgba()
لتحديد اللون. حيث تحدد القيمة النهائية درجة الشفافية: تستخدم 0
للقيمة اللونية الكاملة و 1
للشفافية.
background : linear-gradient ( to right , rgba ( 147 , 184 , 116 , 0 ), rgba ( 147 , 184 , 116 , 1 ));
- على سبيل المثال: لن يمكنك فقط إضافة أكثر من لونين، بل يمكنك أيضًا وضع نسبة مئوية لكل لون. سيتيح لك ذلك تحديد مقدار التباعد الذي تريد أن تكون عليه كل شريحة لونية.
-
انتقل إلى الجزء <style> من شفرة HTML. إذا لم يناسبك وضع خلفية بلون واحد، حاول تجربة هذه الخلفية المتحركة المتغيرة الألوان. بدءًا من إصدار HTML5، ينبغي عليك تعيين لون الخلفية باستخدام لغة التنسيق CSS (صفحات الطرز المتراصة). إذا لم يكن لديك خبرة سابقة في ضبط لون خلفية باستخدام لغة التنسيق CSS، راجع خطوة "وضع لون خلفية واحد" قبل تجربة هذه الطريقة.
-
أضف خاصية الرسوم المتحركة إلى العنصر "body". سيتوجب عليك إضافة خاصيتين مختلفين، حيث أن الترميز يختلف باختلاف المتصفح. [٦] X مصدر بحثي
<! DOCTYPE html > < html > < head > < style > body { -webkit- animation : colorchange 60 s infinite ; animation : colorchange 60 s infinite ; } </ style > </ head > < body > </ body > </ html >
- -webkit-animation هي الخاصية المطلوبة للمتصفحات مفتوحة المصدر (جوجل كروم، أوبرا، سفاري). بينما animation هي الخاصية القياسية لجميع المتصفحات الأخرى.
- colorchange هو ما سنطلق عليه اسم الرسوم المتحركة في هذا المثال.
- 60s هي مدة الرسوم المتحركة/الحركة (60 ثانية). تأكَّد من ضبطه في كل من أداة الويب (webkit) والبنية القياسية.
- infinite يجعل الرسوم المتحركة تتكرر إلى ما لا نهاية. إذا كنت تُفضل أن تدور الألوان مرة واحدة بداخل حلقة ثم تتوقف عند آخر لون، يمكنك إهمال هذا الجزء.
-
أضف الألوان التي ترغب بها إلى الرسوم المتحركة. ستستخدم الآن معيار keyframes@ لتعيين ألوان الخلفية التي ستبدأ منها الحركة، بالإضافة إلى المدة الزمنية التي سيظهر فيها كل لون على الصفحة. يرجى مراعاة أنك ستحتاج إلى مدخلات مختلفة حسب اختلاف المتصفح. [٧] X مصدر بحثي
<! DOCTYPE html > < html > < head > < style > body { -webkit- animation : colorchange 60 s infinite ; animation : colorchange 60 s 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 >
- لاحظ أن معياري ( @-webkit-keyframes و @keyframes لهما نفس ألوان الخلفية والنسب المئوية، لذلك سيتوجب عليك توحيد الطريقة حتى تعمل بنفس الشكل على جميع المتصفحات.
- إن النسب المئوية ( 0% ، 25% ، إلخ) هي من إجمالي مدة الرسوم المتحركة ( 60s ). عند تحميل الصفحة، ستكون الخلفية باللون المحدد في 0% ( #33FFF3 ). بمجرد تشغيل الرسوم المتحركة لمدة 25٪ من إجمالي 60 ثانية، سوف تتحول الخلفية إلى #78281F , وهكذا.
- يمكنك تعديل الوقت والألوان حتى الوصول إلى النتيجة المرجوة.
المصادر
- ↑ https://developer.mozilla.org/en-US/docs/Web/CSS/background-color
- ↑ http://www.w3schools.com/css/css_background.asp
- ↑ http://www.w3schools.com/cssref/pr_background-image.asp
- ↑ https://css-tricks.com/css3-gradients/
- ↑ http://www.w3schools.com/css/css3_gradients.asp
- ↑ https://codepen.io/metagrapher/pen/tgcLl
- ↑ http://www.w3schools.com/css/css3_animations.asp
