كيفية تغيير لون الخلفية باستخدام CSS

كيفية تغيير لون الخلفية باستخدام CSS

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





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





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





احصل على الإعداد

دعونا نتخلص من القليل من العمل التمهيدي.

واجه جهاز الكمبيوتر الخاص بك مشكلة ويجب إعادة تشغيله

ملحوظة : أوصي باستخدام كود الاستوديو المرئي مع ال ملحق Live Server لعرض التغييرات في الوقت الفعلي أثناء تحديث HTML و CSS.



  1. أنشئ مجلدًا لملفات مشروعك.
  2. يخترع index.html ملف لإيواء HTML الخاص بك. يمكنك استخدام التعليمات البرمجية المعيارية ، أو إعداد بعضها فقط و ، و العلامات.
  3. إنشاء Styles.css ملف لـ CSS الخاص بك.
  4. اربط ملف CSS الخاص بك بـ HTML عن طريق وضع داخل العلامات.

أنت الآن جاهز لبدء تحرير CSS.

متعلق ب: كيفية إنشاء موقع Boilerplate





كيفية تغيير لون الخلفية باستخدام CSS

إن أبسط طريقة لتغيير لون الخلفية هي استهداف ملف هيئة بطاقة شعار. ثم قم بتحرير ملف لون الخلفية خاصية. يمكنك العثور على رموز الألوان من خلال البحث عن امتداد متصفح Google Color Picker واستخدامه

body {
background-color: rgb(191, 214, 255);
}

يغير هذا الرمز الخلفية إلى اللون الأزرق الفاتح الجميل.





ال لون الخلفية تقبل الخاصية الألوان بستة أشكال مختلفة:

  • اسم : لايت سكاي بلو. (لتقريب قريب)
  • رمز عرافة : # bfd6ff ؛
  • RGB : RGB (191 ، 214 ، 255) ؛
  • rgba : rgba (191 ، 214 ، 255 ، 1) ؛ أين إلى هو ألفا (عتامة)
  • HSL : hsl (218 درجة ، 100٪ ، 87٪) ؛
  • HSLA : هسلا (218 درجة ، 100٪ ، 87٪ ، 1) ؛ أين إلى هو ألفا (عتامة)

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

إنشاء عنصر وإعطائه فئة — في هذه الحالة ، يكون الفصل لوجة . تعيين الخاص به ارتفاع و العرض خصائص CSS. حدد العنصر في CSS واللون بعيدًا.

body {
background-color: rgb(191, 214, 255);
}
.container{
display: flex;
justify-content: center;
align-items: center;
height: 90vh;
}
.panel {
background: rgb(255, 148, 148);
height: 10rem;
width: 30%;
}
.muo-text {
font-size: 3em;
font-weight: bolder;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
position: absolute;
}

هنا يمكنك رؤية ملف هيئة معرفتي تم تصميم الملكية بشكل مستقل عن .لوجة معرفتي خاصية.

تقبل خاصية الخلفية أيضًا التدرجات:

body {
background: linear-gradient(90deg, rgba(234,233,255,1) 0%, rgba(252,167,213,1) 35%, rgba(194,245,255,1) 100%);
}

كيفية تغيير صورة الخلفية في CSS

ماذا لو كنت تريد أن تكون الخلفية صورة وليست لونًا خالصًا أو متدرجًا؟ الاختزال معرفتي الملكية صديق مألوف.

تأكد من وجود الصورة في نفس المجلد مثل ملفات HTML و CSS. وإلا فسيتعين عليك استخدام مسار الملف داخل الأقواس بدلاً من الاسم فقط:

body {
background: url(leaves-and-trees.jpg)
}

قف! يبدو أن الصورة مكبرة للغاية. يمكنك إصلاح ذلك بامتداد حجم الخلفية خاصية.

body {
background: url(leaves-and-trees.jpg);
background-size: cover;
}

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

body {
background: url(leaves-and-trees.jpg) top left / cover;
}

ها أنت ذا! صورة خلفية بحجم مناسب في سطر واحد من CSS.

اقرأ أكثر: كيفية تعيين صورة الخلفية في CSS

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

ارفع مستوى لعبتك في CSS مع CSS box-shadow

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

حاول تعزيز الصناديق الخاصة بك باستخدام CSS box-shadow. عناصر HTML الخاصة بك لم تبدو أفضل من أي وقت مضى!

يشارك يشارك سقسقة بريد الالكتروني كيفية استخدام CSS box-shadow: 13 حيلة وأمثلة

الصناديق اللطيفة تبدو مملة. قم بتجميلها باستخدام تأثير ظل مربع CSS!

اقرأ التالي
مواضيع ذات صلة
  • برمجة
  • تطوير الشبكة
  • تصميم المواقع
  • CSS
نبذة عن الكاتب ماركوس ميرز الثالث(26 مقالة منشورة)

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

المزيد من Marcus Mears III

اشترك في نشرتنا الإخبارية

انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!

انقر هنا للاشتراك