الخاصية background

تعني الخاصية background الخلفية والتي تقوم بتعديلات عدة علي خلفيات النص او العنصر المطلوب

وتنقسم الي عدة انقسامات

وكل خاصية منهم مسؤله عن القيام بشيء معين كما سنشاهد لاحقا

background-color

تقوم الخاصية background color بتغيير لون الخلفية كما في المثال التالي

مثال

<html>
<head>
<style>
p {
background-color:blue;
} 
</style>
</head>
<body>
<p>Hello World!</p>
<p>هذه قطعة تم تنسيقها ب css</p>
</body>
</html>

كما ترا في الاعلي تغيرت خلفية النص الي اللون الأزرق

مثال2

<html>
<head>
<style>
body {
background-color:aqua;
   opacity:
} 
  .arschools{
  background-color:red;
  }
  h1 {
  background-color:blue;
  }

</style>
</head>
<body>
<p class="arschools">Hello World!</p>
<h1>هذا عنوان تم تنسيقه ب css</h1>
</body>
</html>

في المثال أعلاه قمنا بتغيير نمط لون خلفية الصفحة الي اللون الأزرق المائي ثم قمنا بعمل كلاس باسم arshools ومن ثم قمنا بوضعه في القطعة التي تحمل كلمة hello world

opacity

والخاصية opacity تقوم بوصف مستوي الشفافية اعلي قيمة هي 1 واقل قيمة هي0 ويصبح العنصر شفاف تماما .

بالتالي يمكن أيضا تمثيلها بالنسبة المئوية حيث اقل نسبة هي 0% واعلي قيمة هي 100%

<html>
<head>
<style>
body {
background-color:aqua;
   opacity:10%;
} 


</style>
</head>
<body>
<p>Hello World!</p>
<h1>هذا عنوان تم تنسيقه ب css</h1>
</body>
</html>

كما رأيت في المثال أعلاه أصبحت الصفحة شبه شفافة

يمكن تمثيلها

h1 {
   opacity:0.1;
}

background image

الخاصية background image مسئولة عن إضافة صورة في الخلفية ، هل تتذكر درس المسارات؟

وبشكل افتراضي يتم تكرار الصورة لتحوي كل العنصر أو الصفحة

مثال

<html>
<head>
<style>
body {
background-image:url("/StarNight.jpg");
} 
  .arschools{
  background-color:red;
  }

</style>
</head>
<body>
<p class="arschools">Hello World!</p>
</body>
</html>