شاركـ أصدقائك

كورس CSS | شرح Backgrounds | موقع فولدرات

الرئيسية / الحاسب الآلي / لغات البرمجة / CSS / كورس CSS | شرح Backgrounds

القرآن الكريم كامل المصحف الذكي (جديد) , المصحف النصي

شرح كورس اكواد بالعربي للمبتدئين css

تُستخدم خصائص الخلفية في CSS لتحديد تأثيرات الخلفية للعناصر.

تطبق خاصية صورة الخلفية في CSS رسمًا (مثل PNG و SVG و JPG و GIF و WEBP) أو تدرج على خلفية عنصر.

هناك نوعان مختلفان من الصور التي يمكنك تضمينها في CSS: الصور العادية والتدرجات اللونية.

في هذه الفصول ، ستتعرف على خصائص خلفية CSS التالية:

background-color
background-image
background-repeat
background-attachment
background-position

background-color

تحدد خاصية لون الخلفية لون خلفية العنصر.

مثال:
يتم تعيين لون خلفية الصفحة كما يلي:

body {
  background-color: lightblue;
}

النتيجة كالآتي:

كورس شرح دروس للمبتدئين بالعربي css خلفيات اللوان background

باستخدام CSS ، يتم تحديد اللون غالبًا بواسطة:

اسم لون صالح - مثل "أحمر"
قيمة HEX - مثل "# ff0000"
قيمة RGB - مثل "(rgb(255,0,0"

عناصر أخرى:

يمكنك تعيين لون الخلفية لأي عناصر HTML:

مثال:
في ما يلي، سوف يكون للعناصر <h1> و<p> و<div> ألوان خلفية مختلفة:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  background-color: green;
}
 
div {
  background-color: lightblue;
}
 
p {
  background-color: yellow;
}
</style>
</head>
<body>
 
<h1>CSS مثال لخلفية </h1>
<div>
divهذا نص داخل عنصر 
<p>تحتوي هذه الفقرة على لون الخلفية الخاص بها</p>
 divما زلنا في عنصر
</div>

النتيجة كالآتي:

كورس شرح دروس بالعربي للمبتدئين css خلفية اللوان

العتامة / الشفافية:

تحدد الخاصية عدم شفافية/شفافية العنصر. يمكن أن تستغرق قيمة من 0.0 إلى 1.0. كلما كانت القيمة أقل، كانت أكثر شفافية:

opacity 1

opacity 0.6

opacity 0.3

opacity 0.1

مثال:

div {
  background-color: green;
  opacity: 0.3;
}

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

الشفافية باستخدام RGBA:

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

100% opacity

60% opacity

30% opacity

10% opacity

لقد تعلمت من CSS Colors Chapter أنه يمكنك استخدام RGB كقيمة لونية. بالإضافة إلى RGB ، يمكنك استخدام قيمة لون RGB مع قناة ألفا (RGBA) - والتي تحدد عتامة اللون.

يتم تحديد قيمة ألوان RGBA بـ: rgba (أحمر ، أخضر ، أزرق ، ألفا). معامل ألفا هو رقم بين 0.0 (شفاف بالكامل) و 1.0 (معتم بالكامل).

مثال:

div {
  background: rgba(0, 128, 0, 0.3) /* خلفية خضراء مع 30% معدل شفافية */
}

background-image

تحدد خاصية صورة الخلفية صورة لاستخدامها كخلفية لعنصر.

بشكل افتراضي ، يتم تكرار الصورة بحيث تغطي العنصر بأكمله.

مثال:
يمكن تعيين صورة الخلفية للصفحة على النحو التالي:

body {
  background-image: url("paper.gif");
}

مثال:
يعرض هذا المثال تركيبة غير صحيحة من النص وصورة الخلفية. يصعب قراءة النص:

body {
  background-image: url("bgdesert.jpg");
}

ملاحظة: عند استخدام صورة خلفية، استخدم صورة لا تزعج النص.

background-repeat

بشكل افتراضي، تكرر خاصية صورة الخلفية صورة أفقياً وعمودياً.

يجب تكرار بعض الصور أفقيًا أو عموديًا فقط، وإلا ستبدو غريبة، كما يلي:

مثال:

body {
  background-image: url("gradient_bg.png");
}

النتيجة كالآتي:

درس شرح كورس للممبتدئين cssخلفية اللوان

إذا تم تكرار الصورة أعلاه أفقيًا فقط (Background-repeat: repeat-x؛)، فستبدو الخلفية أفضل:

مثال:

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

النتيجة كالآتي:

كورس شرح درس للمبتدئين بالعربيcssخلفية اللوان

تلميح: لتكرار صورة عمودياً، قم بتعيين Background-repeat: REPEAT-Y؛

background-repeat: no-repeat

يتم أيضًا تحديد عرض صورة الخلفية مرة واحدة فقط بواسطة خاصية التكرار في الخلفية:

مثال
أظهر صورة الخلفية مرة واحدة فقط:

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
}

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

background-position

يتم استخدام الخاصية موضع الخلفية لتحديد موضع صورة الخلفية.

مثال:
ضع صورة الخلفية في الزاوية العلوية اليمنى:

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

background-attachment

تحدد خاصية مرفق الخلفية ما إذا كان يجب تمرير صورة الخلفية أو إصلاحها (لن يتم التمرير مع باقي الصفحة):

مثال:
حدد أنه يجب إصلاح صورة الخلفية:

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

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

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
}

background - Shorthand property

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

بدلاً من الكتابة:

body {
  background-color: #ffffff;
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

يمكنك استخدام خلفية خاصية الاختصار:

مثال:
استخدم الخاصية اختصار لتعيين خصائص الخلفية في بيان واحد:

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

عند استخدام الخاصية المختصرة، يكون ترتيب قيم الخصائص هو:

لون الخلفية
الخلفية-الصورة
الخلفية-تكرار
الخلفية-مرفق
الخلفية-الموضع

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

لا تنسى مشاركة الصفحة ومن صالح دعائكم

CSS | مقدمة

CSS | شرح Syntax

CSS | شرح Selectors

CSS | كيفية إضافة CSS

CSS | شرح Comments

CSS | شرح Colors

CSS | شرح Backgrounds

CSS | شرح Borders