خصائص CSS المتعلقة بالخلفية

Articles

توضح هذه المقالة خصائص CSS المتعلقة بالخلفية۔

يمكنك تعلم كيفية وصف الخصائص مثل إعداد الخلفية والموقع والتكرار۔

YouTube Video

إنشاء HTML للمعاينة

css-background.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-background.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Background-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Background And Decoration</h2>
 20        </header>
 21        <article>
 22            <h3>background-color</h3>
 23            <section>
 24                <header><h4>background-color: red</h4></header>
 25                <section class="sample-view">
 26                    <div class="red-example">This is a red background.</div>
 27                </section>
 28                <header><h4>background-color: #FF5733</h4></header>
 29                <section class="sample-view">
 30                    <div class="hex-example">This is a background with hex color (#FF5733).</div>
 31                </section>
 32                <header><h4>background-color: rgb(255, 87, 51)</h4></header>
 33                <section class="sample-view">
 34                    <div class="rgb-example">This is a background with RGB color (rgb(255, 87, 51)).</div>
 35                </section>
 36                <header><h4>background-color: rgba(255, 87, 51, 0.7)</h4></header>
 37                <section class="sample-view">
 38                    <div class="rgba-example">This is a background with RGBA color (rgba(255, 87, 51, 0.7)).</div>
 39                </section>
 40                <header><h4>background-color: hsl(14, 100%, 60%)</h4></header>
 41                <section class="sample-view">
 42                    <div class="hsl-example">This is a background with HSL color (hsl(14, 100%, 60%)).</div>
 43                </section>
 44                <header><h4>background-color: hsla(14, 100%, 60%, 0.7)</h4></header>
 45                <section class="sample-view">
 46                    <div class="hsla-example">This is a background with HSLA color (hsla(14, 100%, 60%, 0.7)).</div>
 47                </section>
 48                <header><h4>background-color: transparent</h4></header>
 49                <section class="sample-view">
 50                    <div class="transparent-example">This is a background with transparency (transparent).</div>
 51                </section>
 52            </section>
 53        </article>
 54        <article>
 55            <h3>background-image</h3>
 56            <section>
 57                <header><h4>background-image: url('image.jpg')</h4></header>
 58                <section class="sample-view">
 59                    <div class="background-image-example">This is a background image.</div>
 60                </section>
 61                <header><h4>background-image: linear-gradient(to right, red, blue)</h4></header>
 62                <section class="sample-view">
 63                    <div class="background-image-gradient">This is a background gradient.</div>
 64                </section>
 65            </section>
 66        </article>
 67        <article>
 68            <h3>background-position</h3>
 69            <section>
 70                <header><h4>background-position: top left</h4></header>
 71                <section class="sample-view">
 72                    <div class="top-left-example">Top Left</div>
 73                </section>
 74                <header><h4>background-position: center</h4></header>
 75                <section class="sample-view">
 76                    <div class="center-example">Center</div>
 77                </section>
 78                <header><h4>background-position: bottom right</h4></header>
 79                <section class="sample-view">
 80                    <div class="bottom-right-example">Bottom Right</div>
 81                </section>
 82            </section>
 83        </article>
 84        <article>
 85            <h3>background-size</h3>
 86            <section>
 87                <header><h4>background-size: cover</h4></header>
 88                <section class="sample-view">
 89                    <div class="cover-example">Cover</div>
 90                </section>
 91                <header><h4>background-size: contain</h4></header>
 92                <section class="sample-view">
 93                    <div class="contain-example">Contain</div>
 94                </section>
 95                <header><h4>background-size: 100px 100px</h4></header>
 96                <section class="sample-view">
 97                    <div class="fixed-size-example">100px by 100px</div>
 98                </section>
 99            </section>
100        </article>
101        <article>
102            <h3>background-repeat</h3>
103            <section>
104                <header><h4>background-repeat: repeat</h4></header>
105                <section class="sample-view">
106                    <div class="repeat-example">Repeat</div>
107                </section>
108                <header><h4>background-repeat: repeat-x</h4></header>
109                <section class="sample-view">
110                    <div class="repeat-x-example">Repeat X</div>
111                </section>
112                <header><h4>background-repeat: no-repeat</h4></header>
113                <section class="sample-view">
114                    <div class="no-repeat-example">No Repeat</div>
115                </section>
116                <header><h4>background-repeat: space</h4></header>
117                <section class="sample-view">
118                    <div class="space-example">Space</div>
119                </section>
120                <header><h4>background-repeat: round</h4></header>
121                <section class="sample-view">
122                    <div class="round-example">Round</div>
123                </section>
124            </section>
125        </article>
126    </main>
127</body>
128</html>

الخلفية والديكور

خاصية `background-color`

 1/* Background color specification */
 2.red-example {
 3    background-color: red;
 4}
 5
 6.hex-example {
 7    background-color: #FF5733;
 8}
 9
10.rgb-example {
11    background-color: rgb(255, 87, 51);
12}
13
14.rgba-example {
15    background-color: rgba(255, 87, 51, 0.7);
16}
17
18.hsl-example {
19    background-color: hsl(14, 100%, 60%);
20}
21
22.hsla-example {
23    background-color: hsla(14, 100%, 60%, 0.7);
24}
25
26.transparent-example {
27    background-color: transparent;
28    color: black;
29}

تُستخدم خاصية background-color في CSS لتعيين لون خلفية العنصر۔ يمكنك تحديد اللون المعروض خلف النصوص والعناصر الأخرى، ويمكن تعريف الألوان بصيغ متعددة۔ طريقة تحديد الألوان مماثلة لخاصية color، ولكن يمكنك أيضًا تحديد خلفية شفافة تمامًا باستخدام transparent۔

توضيح:

الفئة red-example تحدد لون الخلفية باللون الأحمر باستخدام كلمة مفتاحية۔
الفئة hex-example تحدد لون الخلفية باستخدام رمز سداسي عشري۔
الفئة rgb-example تحدد لون الخلفية باستخدام تنسيق RGB۔
الفئة rgba-example تحدد لون الخلفية باستخدام تنسيق RGBA مع إضافة الشفافية۔
الفئة hsl-example تحدد لون الخلفية باستخدام تنسيق HSL۔
الفئة hsla-example تحدد لون الخلفية باستخدام تنسيق HSLA مع إضافة الشفافية۔
الفئة transparent-example تضبط الخلفية لتكون شفافة۔

خاصية `background-image`

 1/* Background image styles */
 2.background-image-example {
 3    /* Specify the image URL */
 4    background-image: url('image.jpg');
 5    /* Scale the image to cover the entire element */
 6    background-size: cover;
 7    /* Center the image */
 8    background-position: center;
 9    /* Disable image repetition */
10    background-repeat: no-repeat;
11    color: white;
12    display: flex;
13    align-items: center;
14    justify-content: center;
15}
16
17/* Gradient background styles */
18.background-image-gradient {
19    /* Gradient from left to right */
20    background-image: linear-gradient(to right, red, blue);
21    color: white;
22    display: flex;
23    align-items: center;
24    justify-content: center;
25}

تُستخدم خاصية background-image لتعيين صورة كخلفية للعنصر۔ تُعرض الصورة المحددة كخلفية للعنصر، ويمكن تعديل حجمها وموقعها وطريقة التكرار باستخدام خصائص ذات صلة۔ سنشرح أيضًا خصائص ذات صلة مثل background-size و background-position و background-repeat لاحقًا۔

توضيح:

الفئة background-image-example تستخدم خاصية background-image لتعيين image.jpg كخلفية۔ background-size: cover يجعل الصورة تغطي العنصر بالكامل، و background-position: center يركز الصورة۔ يتم تعطيل التكرار باستخدام background-repeat: no-repeat۔
تستخدم الفئة background-image-gradient خاصية linear-gradient() لتعيين تدرج خلفية من الأحمر إلى الأزرق۔ يُعرض التدرج من اليسار إلى اليمين۔

أنواع القيم التي يمكن تحديدها

يمكن أن تأخذ خاصية background-image القيم التالية۔

url(): يحدد عنوان URL لصورة الخلفية۔ قم بتضمين ملف الصورة داخل url()۔ (ex.url('image.jpg'))
none: يحدد عدم تعيين صورة خلفية۔ هذه هي القيمة الافتراضية۔
التدرجات: من الممكن أيضًا تعيين التدرجات كصور خلفية باستخدام ميزات تدرج CSS۔ (ex.linear-gradient(), radial-gradient())

نقاط رئيسية في خاصية `background-image`

حجم الصورة وتحديد الموضع: يمكن التحكم بدقة في حجم الصور الخلفية وتحديد موضعها باستخدام خصائص أخرى، مما يسمح بتعديلات في التصميم۔ على سبيل المثال، تحديد background-size: cover يمدد الصورة لتغطية المنطقة بالكامل، مما يزيل أي اقتطاع۔
استخدام التدرجات: بدلًا من صورة، يمكنك استخدام تدرج كخلفية، مما يضيف عنصرًا ديناميكيًا للتصميم۔

خاصية `background-position`

 1/* Positioned at the top-left */
 2.top-left-example {
 3    background-image: url('image.jpg');
 4    background-position: top left;
 5    background-size: cover;
 6    background-repeat: no-repeat;
 7    background-color: lightblue;
 8    height: 100px;
 9}
10
11/* Centered */
12.center-example {
13    background-image: url('image.jpg');
14    background-position: center;
15    background-size: cover;
16    background-repeat: no-repeat;
17    background-color: lightcoral;
18    height: 100px;
19}
20
21/* Positioned at the bottom-right */
22.bottom-right-example {
23    background-image: url('image.jpg');
24    background-position: bottom right;
25    background-size: cover;
26    background-repeat: no-repeat;
27    background-color: lightgreen;
28    height: 100px;
29}

تُستخدم خاصية background-position لتحديد موضع صورة الخلفية داخل عنصر ما۔ من خلال التحكم في مكان ظهور صورة الخلفية داخل العنصر، يمكنك إنشاء تخطيطات تتناسب مع تصميمك۔ القيمة الافتراضية هي 0% 0%، مما يضع الصورة في الزاوية العلوية اليسرى۔

توضيح:

الفئة top-left-example تحدد موضع الصورة كـ top left، وتضع الصورة في الزاوية العليا اليسرى۔
الفئة center-example تضبط موضع الصورة في الوسط باستخدام الخاصية center۔
الفئة bottom-right-example تحدد موضع الصورة كـ bottom right، وتضع الصورة في الزاوية السفلى اليمنى۔

أنواع القيم التي يمكن تحديدها

يمكن أن تأخذ خاصية background-position الأنواع التالية من القيم۔

كلمات رئيسية: يمكنك تحديد left، right، top، bottom، center۔
- تحديد center سيضع صورة الخلفية في مركز العنصر۔
- تحديد right سيضع صورة الخلفية على الجانب الأيمن۔
- تحديد top left سيضع صورة الخلفية في الزاوية العلوية اليسرى۔
- تحديد bottom right سيضع صورة الخلفية في الزاوية السفلية اليمنى۔
الطول أو النسبة المئوية: يمكنك تحديد قيم مثل 10px 20px، 50% 50%۔
- تحديد 10px 20px سيضع صورة الخلفية على بعد 10 بكسل من اليسار و20 بكسل من الأعلى۔
- تحديد 50% 50% سيضع صورة الخلفية في المنتصف أفقيًا وعموديًا۔
دالة calc(): تسمح بموضع أكثر دقة باستخدام حسابات CSS۔

خاصية `background-size`

 1/* Fit the image to cover the entire area */
 2.cover-example {
 3    background-image: url('image.jpg');
 4    /* The image covers the entire element */
 5    background-size: cover;
 6    background-color: lightblue;
 7}
 8
 9/* Fit the image within the element */
10.contain-example {
11    background-image: url('image.jpg');
12    /* The image fits within the element */
13    background-size: contain;
14    background-color: lightgreen;
15}
16
17/* Display at a fixed size */
18.fixed-size-example {
19    background-image: url('image.jpg');
20    /* Fixed width of 100px and height of 100px */
21    background-size: 100px 100px;
22    background-color: lightcoral;
23}

تُستخدم خاصية background-size لتحديد حجم صورة الخلفية لعنصر ما۔ من خلال استخدام هذه الخاصية، يمكنك ضبط كيفية عرض صورة الخلفية، سواء كانت تملأ العنصر بالكامل أو تحافظ على حجمها الأصلي ليتناسب مع التصميم۔ القيمة الافتراضية هي auto، والتي تحافظ على الحجم الأصلي لصورة الخلفية۔

توضيح:

الفئة cover-example تحدد الخاصية cover۔ ستتكبر الصورة لتغطية العنصر بالكامل، ولكن قد يتم اقتطاع بعض الأجزاء۔
الفئة contain-example تحدد الخاصية contain۔ سيتم ضبط الصورة لتناسب العنصر، ولكن قد تظهر مساحة فارغة۔
الفئة fixed-size-example تحدد حجمًا ثابتًا لخلفية الصورة، مع ضبط العرض والارتفاع إلى 100 بكسل لكل منهما۔

أنواع القيم التي يمكن تحديدها

يمكن تعيين خاصية background-size للقيم التالية.۔

الكلمات المفتاحية
- auto: يحتفظ بالحجم الافتراضي للصورة (يتم تحديد العرض والارتفاع تلقائيًا)۔
- cover: تعدل حجم صورة الخلفية لتغطية العنصر بالكامل۔ ستملأ العنصر بالكامل، ولكن قد يتم اقتطاع أجزاء من الصورة۔
- contain: تعدل الصورة لتلائم داخل العنصر، لكنها لا تغطي العنصر بالكامل۔ يتم الحفاظ على نسبة العرض إلى الارتفاع للصورة۔
القيم العددية (px، %، em، إلخ.)
- العرض والارتفاع: تحديد العرض والارتفاع بشكل صريح۔ إذا تم تحديد قيمة واحدة فقط، فإنها تنطبق على العرض ويتم تعديل الارتفاع تلقائيًا۔
- النسبة المئوية: حدد حجم صورة الخلفية كنسبة مئوية من حجم العنصر۔ على سبيل المثال، 50% 50% تجعل الصورة نصف عرض وارتفاع العنصر۔

خاصية `background-repeat`

 1/* Repeat vertically and horizontally */
 2.repeat-example {
 3    background-image: url('pattern.png');
 4    background-repeat: repeat;
 5    background-size: auto;
 6}
 7
 8/* Repeat only horizontally */
 9.repeat-x-example {
10    background-image: url('pattern.png');
11    background-repeat: repeat-x;
12    background-size: auto;
13}
14
15/* No repetition */
16.no-repeat-example {
17    background-image: url('pattern.png');
18    background-repeat: no-repeat;
19    background-size: auto;
20}
21
22/* Space out evenly */
23.space-example {
24    background-image: url('pattern.png');
25    background-repeat: space;
26    background-size: auto;
27    width: 90px;
28    height: 60px;
29}
30
31/* Resize and repeat */
32.round-example {
33    background-image: url('pattern.png');
34    background-repeat: round;
35    background-size: auto;
36}

تُستخدم خاصية background-repeat للتحكم في كيفية تكرار صورة خلفية العنصر۔ بشكل افتراضي، تتكرر صورة الخلفية أفقياً وعمودياً داخل العنصر، ولكن يمكنك تخصيص سلوك التكرار باستخدام هذه الخاصية۔

توضيح:

الفئة repeat-example تعرض الصورة مُكررة عموديًا وأفقيًا۔
الفئة repeat-x-example تكرر الصورة أفقيًا فقط۔
الفئة no-repeat-example تعرض الصورة مرة واحدة فقط دون تكرار۔
الفئة space-example ترتب صور الخلفية بشكل متساوٍ مع تباعد متساوٍ بينها۔
الفئة round-example تضبط حجم صورة الخلفية تلقائيًا لتكرارها وملء العنصر بالكامل۔

القيم التي يمكن تحديدها

يمكن تعيين خاصية background-repeat للقيم التالية.۔

repeat: تتكرر صورة الخلفية على طول المحور X (أفقي) والمحور Y (عمودي)۔ هذه هي القيمة الافتراضية۔
repeat-x: تتكرر صورة الخلفية فقط على طول المحور X (أفقي)۔
repeat-y: تتكرر صورة الخلفية فقط على طول المحور Y (عمودي)۔
no-repeat: لا تتكرر صورة الخلفية وتُعرض مرة واحدة فقط۔
space: تتكرر صورة الخلفية بفواصل زمنية منتظمة، مع تباعد متساوٍ بينها۔
round: تتكرر صورة الخلفية، لكن يتم تعديل الحجم لملء العنصر بالكامل۔ قد يتم تعديل حجم الصورة۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video

خصائص CSS المتعلقة بنموذج الصندوق خصائص CSS المتعلقة بتزيين نموذج الصندوق

خصائص CSS المتعلقة بالخلفية

YouTube Video

إنشاء HTML للمعاينة

الخلفية والديكور

خاصية background-color

توضيح:

خاصية background-image

توضيح:

أنواع القيم التي يمكن تحديدها

نقاط رئيسية في خاصية background-image

خاصية background-position

توضيح:

أنواع القيم التي يمكن تحديدها

خاصية background-size

توضيح:

أنواع القيم التي يمكن تحديدها

خاصية background-repeat

توضيح:

القيم التي يمكن تحديدها

YouTube Video

خاصية `background-color`

خاصية `background-image`

نقاط رئيسية في خاصية `background-image`

خاصية `background-position`

خاصية `background-size`

خاصية `background-repeat`