قد تعتقد أن تصميم الخلفية بسيط ، لكن CSS بها العديد من الخصائص الغامضة والقوية لتتعلمها.

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

يمكنك استخدام خصائص خلفية CSS لتعيين نمط الخلفية لعناصر HTML. تعرف على كل شيء عن بعض خصائص CSS التي يمكنك استخدامها لإنشاء خلفيات ممتازة.

1. لون الخلفية

ال خاصية لون الخلفية يحدد لون خلفية العنصر. يمكنك ضبط اللون باستخدام اسم مثل "أحمر" ، أو قيمة HEX مثل "# 00FF00" أو قيمة RGB - مثل "rgb (0 ، 255 ، 0)". يمكنك أيضًا استخدام قيمة HSL لتعيين لون الخلفية باستخدام تدرج اللون والتشبع والإضاءة.

يضبط المثال التالي لون خلفية الصفحة بأكملها على اللون البرتقالي. كل عنصر من عناصر العنوان يحصل على خلفية مختلفة.

<جسم>
<h2>انا اخضرh2>
<h3>أنا أحمرh3>
<h4>انا حزينh4>
جسم>

باستخدام CSS ، يمكنك تطبيق لون خلفية فريد لكل عنصر:

جسم {
لون الخلفية: البرتقالي;
}
h2 {
لون الخلفية: #006600;
}


h3 {
لون الخلفية: RGB(128, 0, 0);
}
h4{
لون الخلفية: هسل(240, 100%, 50%);
}

سيؤدي هذا إلى تنسيق الصفحة لتبدو كما يلي:

instagram viewer

يمكنك استخدام خاصية العتامة لتحديد شفافية العنصر. يأخذ التعتيم قيمًا بين 0.0 و 1.0. كلما انخفضت القيمة ، زادت شفافية العنصر.

كمثال ، حاول ضبط عتامة عنصر الجسم على 0.5:

جسم {
لون الخلفية:البرتقالي;
العتامة:0.5;
}

سيظهر هذا على النحو التالي - قارن الألوان بتلك الموجودة في لقطة الشاشة السابقة:

2. الصورة الخلفية

تعيّن خاصية صورة الخلفية صورة كخلفية لعنصر. يمكنك الرجوع إلى صورة محلية أو صورة من الإنترنت.

<جسم>
 <h1>مرحبًاهناك!h1>
 <ص>أنايملكاصورةفيليخلفية!ص>
جسم>

ملف CSS:

جسم {
الصورة الخلفية: url ("https://الصور.pexels.com/الصور/1191710/pexels صورة 1191710.jpeg?آلي=ضغط&CS=تينيسرب&ث=1260&ح=750&dpr=1");
}

سيعرض هذا على النحو التالي:

تستطيع ايضا استخذام تدرجات الخلفية لإنشاء مظهر فريد لتطبيقك.

3. تكرار الخلفية

تكرر خاصية صورة الخلفية الصور افتراضيًا. يمكنك اختيار تكرار الصورة أفقيًا على المحور س أو عموديًا على المحور ص.

بدلاً من ذلك ، إذا كان التكرار لا يناسب أسلوبك ، فيمكنك إزالته باستخدام القيمة لا تكرار.

<جسم>
<h1>أهلاً بك!h1>
<h3>أنا أقوم بتوضيح خاصية تكرار الخلفية على المحور السيني!h3>
جسم>

استخدم CSS التالي لتطبيق خلفية متكررة على طول المحور x:

جسم {
الصورة الخلفية: عنوان url("https://الصور.pexels.com/الصور/459335/pexels-photo-459335.jpeg?آلي=ضغط&CS=تينيسرب&ث=1260&ح=750&dpr=1");
تكرار الخلفية: كرر- x;
}

النتائج:

بعد ذلك ، حاول تكرار الصورة على المحور ص:

جسم {
الصورة الخلفية: url ("https://cdn.pixabay.com/صورة/2016/04/18/22/05/صدف - 1337565__340.jpg");
تكرار الخلفية: كرر ص;
}

النتائج:

من المؤكد أن المثال على المحور الصادي يبدو مشوهًا. إذا لم تكن هذه هي الأنماط التي تبحث عنها ، فيمكنك تحديدها لا تكرار بدلاً من:

جسم {
الصورة الخلفية: url ("https://الصور.pexels.com/الصور/259915/pexels-photo-259915.jpeg?آلي=ضغط&CS=تينيسرب&ث=600");
تكرار الخلفية: لا تكرار;
}

النتائج:

4. خلفية الموقف

تحدد خاصية background-position موضع صورة الخلفية داخل عنصرها. يستخدم كلمات رئيسية خاصة بالموضع مثل مركز, قمة، و قاعأو قيمة البكسل أو النسبة المئوية.

أضف خاصية background-position إلى الصورة الأخيرة:

جسم {
الصورة الخلفية: عنوان url("https://الصور.pexels.com/الصور/259915/pexels-photo-259915.jpeg?آلي=ضغط&CS=تينيسرب&ث=600");
خلفية الموقف: قمةمركز;
}

سيبدو مثل هذا:

تستطيع أن ترى الصورة تشوه مظهر الموقع. دعنا نصلح ذلك مع الخاصية التالية.

5. حجم الخلفية

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

جسم {
 صورة الخلفية: url (" https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg? auto = ضغط & cs = tinysrgb & w = 600 ");
 تكرار الخلفية: لا تكرار ؛
 موضع الخلفية: المركز ؛

تظهر النتيجة أن الصورة تغطي الآن صفحة الويب بشكل متناسب.

6. مرفق الخلفية

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

دعنا نظهر ذلك في الكود التالي:

<جسم>
<h1>خاصية مرفق الخلفيةh1>
<ص>مع خاصية المرفق الثابت ستلاحظ أن الخلفية لا تتحرك مع النص.ص>
<ص>مع خاصية المرفق الثابت ستلاحظ أن الخلفية لا تتحرك مع النص.ص>
<ص>مع خاصية المرفق الثابت ستلاحظ أن الخلفية لا تتحرك مع النص.ص>
<ص>مع خاصية المرفق الثابت ستلاحظ أن الخلفية لا تتحرك مع النص.ص>
<ص>مع خاصية المرفق الثابت ستلاحظ أن الخلفية لا تتحرك مع النص.ص>
<ص>مع خاصية المرفق الثابت ستلاحظ أن الخلفية لا تتحرك مع النص.ص>
<ص>مع خاصية المرفق الثابت ستلاحظ أن الخلفية لا تتحرك مع النص.ص>
<ص>مع خاصية المرفق الثابت ستلاحظ أن الخلفية لا تتحرك مع النص.ص>
<ص>مع خاصية المرفق الثابت ستلاحظ أن الخلفية لا تتحرك مع النص.ص>
<ص>مع خاصية المرفق الثابت ستلاحظ أن الخلفية لا تتحرك مع النص.ص>
<ص>مع خاصية المرفق الثابت ستلاحظ أن الخلفية لا تتحرك مع النص.ص>
<ص>مع خاصية المرفق الثابت ستلاحظ أن الخلفية لا تتحرك مع النص.ص>
جسم>

ملف CSS:

جسم {
الصورة الخلفية: عنوان url("https://الصور.pexels.com/الصور/96627/pexels- فوتو- 96627.jpeg?آلي=ضغط&CS=تينيسرب&ث=600");
تكرار الخلفية: لا تكرار;
خلفية الموقف: مركز;
حجم الخلفية: غطاء;
مرفق الخلفية: مُثَبَّت;
}

إذا انتقلت إلى أسفل الصفحة ، فستلاحظ أن الخلفية لا تتحرك:

لإثبات خاصية التمرير الخلفي - المرفق ، قم بتغيير الكلمة الأساسية إلى التمرير. ستلاحظ الآن أن الخلفية تتحرك مع النص.

جسم {
الصورة الخلفية: عنوان url("https://الصور.pexels.com/الصور/96627/pexels- فوتو- 96627.jpeg?آلي=ضغط&CS=تينيسرب&ث=600");
تكرار الخلفية: لا تكرار;
خلفية الموقف: مركز;
حجم الخلفية: غطاء;
مرفق الخلفية: التمرير;
}

7. خاصية اختزال الخلفية

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

تتيح لك خاصية الاختزال تعيين العديد من خصائص الخلفية في سطر واحد. أنت تستخدم الكلمة خلفية لتعيين خاصية الاختزال.

على سبيل المثال ، بدلاً من كتابة كود مثل هذا:

جسم {
لون الخلفية: أخضر;
الصورة الخلفية: عنوان url("كمبيوتر محمول 3.jpg");
تكرار الخلفية: لا تكرار;
حجم الخلفية: غطاء;
مرفق الخلفية: التمرير;
خلفية الموقف: مركز;
}

يمكنك كتابتها في سطر واحد مثل هذا:

جسم {
خلفية: أخضرعنوان url("كمبيوتر محمول 3.jpg") لا تكرارغطاءالتمريرمركز;
}

تتبع خاصية الاختزال ترتيبًا معينًا. يجب عليك محاذاة الخصائص بهذا الترتيب حتى إذا كان واحدًا أو أكثر مفقودًا. الترتيب هو:

  • لون الخلفية
  • الصورة الخلفية
  • تكرار الخلفية
  • مرفق الخلفية
  • خلفية الموقف

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

خصائص الخلفية الأخرى في CSS

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

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