يتم استخدام خصائص CSS الخلفية لتحديد الآثار الخلفية لعناصر.
خصائص CSS الخلفية:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
لون الخلفية
على background-color تحدد الخاصية لون خلفية عنصر.
يتم تعيين لون خلفية الصفحة مثل هذا:
مع CSS، وغالبا ما يتم تحديد اللون عن طريق:
- اسم اللون صحيح - مثل "red"
- قيمة HEX - مثل "#ff0000"
- قيمة RGB - مثل "rgb(255,0,0)"
انظروا إلى قيم اللون CSS للحصول على قائمة كاملة من القيم الألوان الممكنة.
في المثال التالي، و <h1>, <p> ، و <div> العناصر لها خلفية مختلفة الألوان:
مثال
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color:
yellow;
} انها محاولة لنفسك » الصورة الخلفية
على background-image تحدد الخاصية صورة لاستخدام كخلفية للعنصر.
افتراضيا، يتم تكرار الصورة بحيث أنها تغطي العنصر بالكامل.
صورة خلفية لصفحة يمكن تعيين مثل هذا:
فيما يلي مثال على مزيج سيء من نص وصورة الخلفية. هذا النص هو بالكاد يمكن قراءته:
 | ملاحظة: عند استخدام صورة خلفية، استخدام الصورة التي لا تخل النص. |
|---|
صورة الخلفية - كرر أفقيا أو عموديا
افتراضيا، background-image الملكية يكرر صورة أفقيا وعموديا.
وينبغي تكرار بعض الصور فقط أفقيا أو رأسيا، أو أنها ستبدو غريبة، مثل هذا:
إذا كانت الصورة أعلاه المتكررة فقط أفقيا ( background-repeat: repeat-x; )، الخلفية سوف تبدو أفضل:
مثال
body
{
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
انها محاولة لنفسك » | ملاحظة: لتكرار صورة وضع عموديا background-repeat: repeat-y; |
|---|
صورة الخلفية - ضبط الموقف وعدم تكرار
عرض صورة الخلفية مرة واحدة فقط يتم تحديد أيضا background-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;
}
انها محاولة لنفسك » خلفية - خاصية إختزال
لتقصير رمز، فمن الممكن أيضا لتحديد جميع خصائص الخلفية في خاصية واحدة واحدة. وهذا ما يسمى خاصية الاختزال.
والخاصية المختصرة لالخلفية background :
عند استخدام الخاصية المختصرة ترتيب قيم الخاصية هو:
-
background-color -
background-image -
background-repeat -
background-attachment -
background-position
لا يهم إذا كان أحد من قيم الخاصية مفقود، طالما أن تلك هي آخر في هذا النظام.
اختبر نفسك مع تمارين!
التمرين 1 » التمرين 2» التمرين 3 » التمرين 4» التمرين 5 »
جميع خصائص CSS الخلفية
| الملكية | وصف |
|---|---|
| background | يحدد كل خصائص الخلفية في إعلان واحد |
| background-attachment | يحدد ما إذا تم إصلاح صورة خلفية أو مخطوطات مع بقية الصفحة |
| background-color | تعيين لون الخلفية عنصر |
| background-image | تعيين صورة خلفية لعنصر |
| background-position | يحدد نقطة الانطلاق من صورة خلفية |
| background-repeat | يحدد كيف سيتم تكرار صورة الخلفية |