logo

كيفية إضافة صورة الخلفية في CSS؟

ال الصورة الخلفية تُستخدم الخاصية في CSS لتعيين صورة كخلفية لعنصر ما. باستخدام خاصية CSS هذه، يمكننا تعيين صورة خلفية واحدة أو أكثر لعنصر ما.

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

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

سلاسل في ج

بناء الجملة

 background-image: url(); 

قيم

رابط (): إنه عنوان URL للصورة. يمكننا فصل عناوين URL بفاصلة إذا أردنا تحديد أكثر من صورة واحدة.

الرد على النمط المضمن

مثال

 body { background-image: url('cat.webp'); background-color: lightgray; } 
اختبره الآن

انتاج |

كيفية إضافة صورة الخلفية في CSS

مثال

 body { height: 200px; background-color: #cccccc; background-image: radial-gradient(red, green, yellow); } 
اختبره الآن

انتاج |

كيفية إضافة صورة الخلفية في CSS

مثال

 body { height: 200px; background-color: #cccccc; background-image: linear-gradient(rgba(0, 0, 255, 0.5),rgba(255, 255, 0, 0.5)), url('lion.webp'); } 
اختبره الآن

انتاج |

كيفية إضافة صورة الخلفية في CSS