تحديد خصائص الخلفية
تلعب الخلفية دورًا مهمًا في العرض المرئي لصفحة الويب.
توفر CSS العديد من الخصائص لتصميم خلفية عنصر ما ، بما في ذلك تلوين الخلفية ووضع الصور في الخلفية وإدارة مواقعها ، إلخ.
خصائص الخلفية هي background-color و background-image و background-repeat و background-attachment إضافة إلى background-position.
في هذا الدرس سوف سنناقش كل من هذه الخصائص بمزيد من التفصيل.
لون الخلفية Background Color
يتم استخدام الخاصية background-color لتعيين لون خلفية عنصر.
يوضح المثال التالي كيفية تعيين لون الخلفية للصفحة بأكملها.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>تحديد لون الخلفية للعنصر في لغة CSS</title>
<style>
body {
background-color: #f0e68c;
}
h1 {
background-color: #46c79c;
}
</style>
</head>
<body>
<h1>Background Color Demo</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc neque. In hac habitasse
platea dictumst. Pellentesque ultrices. Donec nunc metus, aliquam sit amet, aliquam in,
luctus ac, odio. Aenean orci velit, elementum ac, egestas pellentesque, facilisis non,
turpis. Quisque dolor. Vestibulum in massa in lectus hendrerit condimentum. Duis suscipit,
lectus varius fermentum fermentum, est lectus facilisis metus, ac ornare risus ipsum at
sem. Nulla ut eros vel enim tempor.</p>
</body>
</html>
المخرجات
غالبًا ما يتم تحديد الألوان Colors في CSS بالطرق التالية:
- بإستخدام اسم اللون color name مثلا
red - بإستخدام قيمة اللون بالنظام السادس عشر
HEXمثلا#ff0000 - بإستخدام نظام
RGBللألوان مثلاrgb(255, 0, 0)
لمعرفة المزيد حول تحديد قيم الألوان والتعامل معها يرجى مراجعة درس الألوان Colors
صورة الخلفية Background Image
تقوم الخاصية background-image بتعيين صورة كخلفية لعنصر HTML.
يوضح المثال التالي كيفية تعيين صورة الخلفية للصفحة بأكملها.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>مثال على تحديد صورة الخلفية Background Image</title>
<style>
body {
background-image: url("images/tiled-stone.jpg");
}
</style>
</head>
<body>
<h1>Background Image Demo</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc neque. In hac habitasse
platea dictumst. Pellentesque ultrices. Donec nunc metus, aliquam sit amet, aliquam in,
luctus ac, odio. Aenean orci velit, elementum ac, egestas pellentesque, facilisis non,
turpis. Quisque dolor. Vestibulum in massa in lectus hendrerit condimentum. Duis suscipit,
lectus varius fermentum fermentum, est lectus facilisis metus, ac ornare risus ipsum at
sem. Nulla ut eros vel enim tempor.</p>
</body>
</html>
المخرجات
عند تطبيق صورة الخلفية على عنصر ، تأكد من أن الصورة التي تختارها لا تؤثر على إمكانية قراءة محتوى نص العنصر.
بشكل افتراضي ، يكرر المتصفح صورة الخلفية أفقيًا وعموديًا لملء مساحة العنصر بالكامل. يمكنك التحكم في ذلك باستخدام الخاصية background-repeat.
تكرار صورة الخلفية Background Repeat
تتيح لنا الخاصية background-repeat التحكم في كيفية تكرار صورة الخلفية في خلفية عنصر.
يمكننا تعيين صورة خلفية للتكرار رأسيًا (على محور ص) (y-axis) أو أفقيًا (على محور س)(x-axis) في كلا الاتجاهين أو في أي من الاتجاهين.
يوضح المثال التالي كيفية تكرار الصورة أفقيًا على طول المحور س (x-axis)
<!DOCTYPE html>
<html>
<head>
<base href="https://educationfactorys.com/"/>
<meta charset="utf-8">
<title>مثال على تكرار صورة الخلفية Background Repeat</title>
<style>
body {
background-image: url("images/tiled-stone.jpg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Background Repeat Demo</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc neque. In hac habitasse
platea dictumst. Pellentesque ultrices. Donec nunc metus, aliquam sit amet, aliquam in,
luctus ac, odio. Aenean orci velit, elementum ac, egestas pellentesque, facilisis non,
turpis. Quisque dolor. Vestibulum in massa in lectus hendrerit condimentum. Duis suscipit,
lectus varius fermentum fermentum, est lectus facilisis metus, ac ornare risus ipsum at
sem. Nulla ut eros vel enim tempor.</p>
</body>
</html>
المخرجات
وبالمثل ، يمكنك استخدام القيمة repeat-y لتكرار صورة الخلفية رأسيًا على طول المحور ص y-axis ، أو القيمة no-repeat لمنع التكرار تمامًا.
<!DOCTYPE html>
<html>
<head>
<base href="https://educationfactorys.com/"/>
<meta charset="utf-8">
<title>مثال على تكرار صورة الخلفية Background Repeat</title>
<style>
body {
background-image: url("images/tiled-stone.jpg");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>Background Repeat Demo</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc neque. In hac habitasse
platea dictumst. Pellentesque ultrices. Donec nunc metus, aliquam sit amet, aliquam in,
luctus ac, odio. Aenean orci velit, elementum ac, egestas pellentesque, facilisis non,
turpis. Quisque dolor. Vestibulum in massa in lectus hendrerit condimentum. Duis suscipit,
lectus varius fermentum fermentum, est lectus facilisis metus, ac ornare risus ipsum at
sem. Nulla ut eros vel enim tempor.</p>
</body>
</html>
المخرجات
دعونا نلقي نظرة على الرسم التوضيحي التالي لفهم كيفية عمل هذه الخاصية.
موقع الخلفية Background Position
يتم استخدام الخاصية background-position للتحكم في موقع صورة الخلفية.
إذا لم يتم تحديد موقع الخلفية ، يتم وضع صورة الخلفية في الموقع الافتراضي أعلى اليسارtop-left للعنصر ، دعنا نجرب المثال التالي:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>موقع الخلفية Background Position</title>
<style>
body {
background-image: url("images/robot-bg.jpg");
background-repeat: no-repeat;
}
h1, p {
margin-left: 250px;
}
</style>
</head>
<body>
<h1>Background Position Demo</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc neque. In hac habitasse
platea dictumst. Pellentesque ultrices. Donec nunc metus, aliquam sit amet, aliquam in,
luctus ac, odio. Aenean orci velit, elementum ac, egestas pellentesque, facilisis non,
turpis. Quisque dolor. Vestibulum in massa in lectus hendrerit condimentum. Duis suscipit,
ectus varius fermentum fermentum, est lectus facilisis metus, ac ornare risus ipsum at sem.</p>
</body>
</html>
المخرجات
في المثال التالي ، سيتم وضع صورة الخلفية في الزاوية العلوية اليمنى top-right.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>موقع الخلفية Background Position</title>
<style>
body {
background-image: url("images/robot-bg.jpg");
background-repeat: no-repeat;
background-position: right top;
}
h1, p {
margin-right: 280px;
}
</style>
</head>
<body>
<h1>Background Position Demo</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc neque. In hac habitasse
platea dictumst. Pellentesque ultrices. Donec nunc metus, aliquam sit amet, aliquam in,
luctus ac, odio. Aenean orci velit, elementum ac, egestas pellentesque, facilisis non,
turpis. Quisque dolor. Vestibulum in massa in lectus hendrerit condimentum. Duis suscipit,
ectus varius fermentum fermentum, est lectus facilisis metus, ac ornare risus ipsum at sem.</p>
</body>
</html>
المخرجات
إذا تم تحديد قيمتين للخاصية background-position ، فإن القيمة الأولى تمثل الموقع الأفقي horizontal ، والثانية تمثل الموقع الرأسي vertical
. إذا تم تحديد قيمة واحدة فقط ، فسيتم افتراض أن القيمة الثانية هي center.
إلى جانب الكلمات الرئيسية ، يمكنك أيضًا استخدام قيم النسبة المئوية أو الطول ، مثل px أو em لهذه الخاصية.
دعونا نلقي نظرة على الرسم التوضيحي التالي لفهم كيفية عمل هذه الخاصية.
موضع الخلفية Background Attachment
تحدد الخاصية background-attachment ما إذا كانت صورة الخلفية ثابتة فيما يتعلق بإطار العرض أو انها سوف تمرر مع محتوى العنصر.
دعنا نجرب المثال التالي لفهم كيفة عملها:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>مثال على خصائص الخلفية الفردية في لغة CSS</title>
<style>
body {
background-color: #f0e68c;
background-image: url("images/smiley2.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 250px 25px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
المخرجات
الإختصار shorthand property في الخاصية Background
كما رأينا في الأمثلة أعلاه ، هناك العديد من الخصائص التي يجب مراعاتها عند التعامل مع الخلفيات. ومع ذلك ، من الممكن أيضًا تحديد جميع هذه الخصائص في خاصية واحدة لإختصار الكود أو تجنب الكتابة الإضافية. هذا يسمى shorthand property
الخاصية background هي خاصية مختصرة لإعداد جميع خصائص الخلفية ، background-color و background-image و background-repeat و background-attachment و background-position.
ولفهم كيفية عملها لنجرب المثال التالي :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>الإختصار shorthand property في الخاصية Background</title>
<style>
body {
background: #f0e68c url("images/smiley2.png") no-repeat fixed 250px 25px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
المخرجات
باستخدام الخاصية المختصرة background ، يمكن كتابة المثال أعلاه على النحو التالي:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>الإختصار shorthand property في الخاصية Background</title>
<style>
body {
background: #f0e68c url("images/smiley2.png") no-repeat fixed 250px 25px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
المخرجات
عند استخدام الخاصية المختصرة background ، يجب أن يكون ترتيب قيم الخاصية على النحو التالي :
- background: color image repeat attachment position;
إذا كانت قيمة إحدى هذه الخاصيات مفقودة أو غير محددة عند استخدام الخاصية المختصرة background ، فسيتم استخدام القيمة الافتراضية لتلك الخاصية بدلاً من ذلك ، إن وجدت.