كيفية تنفيذ صورة الخلفية في CSS؟

CSS هو اختصار لـ Cascading Style Sheets. إنها لغة تصميم بسيطة لكنها قوية ولديها القدرة على تحويل صفحات الويب. بعبارات بسيطة ، فإنه يبسط عملية جعل صفحات الويب قابلة للتقديم وجذابة للمستخدمين بمساعدة . في هذه المقالة ، سوف نفهم كيفية تنفيذ صور الخلفية المختلفة في CSS بالترتيب التالي:

• صورة الخلفية في خصائص CSS
• صورة الخلفية في CSS
• تكرار الخلفية
• مرفق الخلفية
• موقف الخلفية
• صورة الخلفية بحجم CSS
• لون الخلفية

صورة الخلفية في خصائص CSS

هناك العديد من الخصائص التي تُستخدم للتحكم في سلوكيات وموضع الصورة. هذه الخصائص هي:

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

سوف نتعرف على كل من هذه الخصائص ونرى متى وكيف نستخدمها مع بعض الشرح المثير للاهتمام.

صورة الخلفية في CSS

ال الصورة الخلفية الخاصية كما يوحي الاسم تستخدم ببساطة للإشارة إلى صورة الخلفية وتعيينها من خلال عنصر في صفحة الويب. يتم وضع صورة الخلفية افتراضيًا في الزاوية العلوية اليسرى من العنصر.

بناء الجملة: صورة الخلفية: url | لا شيء | التدرج الخطي | التدرج الشعاعي

النص الأساسي {background-image: url ('apple.jpg')}
الخلفية باستخدام url
 

دعونا نفهم المعلمات:

• عنوان url: يسمح لنا الإدخال إلى هذه المعلمة بتحديد إما مسار ملف إلى أي صورة أو عنوان URL للصورة التي يجب تعيينها كخلفية. للإعلان عن أكثر من صورة واحدة ، يتم فصل عناوين URL بفاصلة محددة.

النص الأساسي {background-image: url ('apple.jpg')}

• لا شيء: هذه هي القيمة الافتراضية للخاصية ولا يتم تقديم صورة خلفية إذا تم تحديد قيمتها.

نص {خلفية: بلا}

• الخطي التدرج(): يتم تعيين صورة الخلفية على تدرج خطي. يلزم تحديد لونين على الأقل لهذه الخاصية ، أي من الأعلى إلى الأسفل.

body {background-color: # 001 background-image: التدرج الخطي (أبيض 15٪ ، شفاف 16٪) ، التدرج الخطي (أبيض 15٪ ، شفاف 16٪) حجم الخلفية: 60 بكسل 60 بكسل وضع الخلفية: 0 0 ، 30 بكسل 30 بكسل}

• شعاعي التدرج(): يتم تعيين صورة الخلفية على تدرج نصف قطري. يجب تحديد لونين على الأقل لهذه الخاصية ، أي من المركز إلى الحواف.

body {background-color: # 001 background-image: شعاعي التدرج (أبيض 15٪ ، شفاف 16٪) ، تدرج نصف قطري (أبيض 15٪ ، شفاف 16٪) حجم الخلفية: 60 بكسل 60 بكسل ، موضع الخلفية: 0 0 ، 30 بكسل 30 بكسل}

• تكرار التدرج الخطي (): يكرر التدرج الخطي. دعونا نستخدم نفس المثال الذي رأيناه أعلاه في التدرج الخطي لتكرار التدرج الخطي ونرى الفرق.

body {background-color: # 001 background-image: تكرار التدرج الخطي (أبيض 15٪ ، شفاف 16٪) ، تدرج خطي متكرر (أبيض 15٪ ، شفاف 16٪) حجم الخلفية: 60 بكسل 60 بكسل خلفية-موضعية : 0 0 ، 30 بكسل 30 بكسل}

• تكرار التدرج الشعاعي (): إنه يكرر تدرجًا شعاعيًا ، دعنا نستكشف نفس المثال الذي استخدمناه أعلاه في التدرج الشعاعي.

body {background-color: # 001 background-image: repeating-radial-gradient (أبيض 15٪ ، شفاف 16٪) ، تدرج-شعاعي متكرر (أبيض 15٪ ، شفاف 16٪) حجم الخلفية: 60 بكسل 60 بكسل خلفية-موضع : 0 0 ، 30 بكسل 30 بكسل}

الخلفية الاحتياطية

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

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

النص الأساسي {background: url (apple_lost.jpg) pink}

خلفية متعددة

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

يوجد أدناه مثال لصور خلفية متعددة:

body {background-image: url ('small-heart.jpg')، url ('background.jpg')}

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

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

القيم الممكنة هي:

• كرر- تتكرر الصورة أفقيًا وعموديًا
• عدم التكرار - الصورة لا تتكرر
• تكرار- x - تتكرر الصورة أفقيًا
• تكرار- y - تتكرر الصورة عموديًا
• space- الصورة مكررة بمسافات متساوية أو فجوات بينها.
• دائري - يتم تكرار الصورة لملء المساحة دون أي فجوات بينها.

بناء جملة CSS لخاصية تكرار الخلفية هو:

تكرار الخلفية: كرر | كرر س | كرر ص | عدم تكرار | مسافة | جولة

body {background-image: url ('heart.png')، url ('background.png') تكرار الخلفية: تكرار y، تكرار x خلفية اللون: #ffffff}

مرفق الخلفية

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

القيم الممكنة هي:

• التمرير - يتم تمرير الصورة مع الصفحة.
• ثابت - لن يتم تمرير الصورة مع الصفحة

بناء جملة CSS لمرفق الخلفية هو:

مرفق الخلفية: التمرير | ثابت

body {background-image: url ('heart.png')، url ('background.png') background-تكرار: space، round}

موقف الخلفية

ال خلفية الموقف تُستخدم الخاصية للإشارة إلى موقع أو وضع صورة الخلفية. القيم الممكنة هي:

• أعلى
• حق
• الأسفل
• اليسار
• مركز
• مجموعة من هذه القيم (على سبيل المثال ، أعلى اليسار)

صيغة CSS لموضع الخلفية هي:

موضع الخلفية: أعلى | يمين | يسار | أسفل | مركز

body {background-image: url ('heart.png') background-تكرار: no-تكرار background-attachment: scroll}

صورة الخلفية بحجم CSS

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

يمكن استخدام القيم التالية مع حجم الخلفية:

• تلقاءي
• طول - ارتفاع وعرض الصورة على سبيل المثال 20 بكسل 40 بكسل.
• النسبة المئوية - ارتفاع وعرض الصورة كنسبة مئوية من عنصر أصل w.r.t على سبيل المثال 50٪ 50٪.
• الوسط - محاذاة الصورة إلى المركز
• غطاء ، تحجيم الصورة لتغطي بالكامل منطقة الخلفية.
• تحتوي على حجم الصورة لتلائم ارتفاعها وعرضها الفعليين.

صيغة CSS لموضع الخلفية هي:

حجم الخلفية: القيمة

body {background-image: url ('heart.png')، url ('background.png') تكرار الخلفية: عدم التكرار، كرر background-size: 400px 150px، cover}

body {background-image: url ('heart.png')، url ('background.png') تكرار الخلفية: no-تكرار، كرر background-size: احتواء، 400px 150px}

لون الخلفية

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

صيغة CSS للون الخلفية هي:

لون الخلفية: القيمة

جسم {background-image: url (small-heart.jpg) لون الخلفية: # 22a8e3}

c ++ العودية فيبوناتشي

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

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

تحقق من الذي يأتي مع تدريب مباشر بقيادة مدرب وخبرة مشروع واقعية. يجعلك هذا التدريب بارعًا في مهارات العمل باستخدام تقنيات الويب الخلفية والأمامية. يتضمن التدريب على تطوير الويب ، jQuery ، Angular ، NodeJS ، ExpressJS ، و MongoDB.

لديك سؤال لنا؟ يرجى ذكر ذلك في قسم التعليقات في مدونة 'صورة الخلفية في CSS' وسنعاود الاتصال بك.