2.8 KiB
| title | localeTitle |
|---|---|
| CSS3 Backgrounds | خلفيات CSS3 |
خلفيات CSS3
وCSS background يستخدم الخاصية المختصرة لتحديد مضاعفات خصائص مثل:
background-color ، background-image background-repeat background-attachment ، background-attachment background-position
لون الخلفية
على background-color تحدد الخاصية لون الخلفية عنصر.
background-color : #F00;
الصورة الخلفية
تحدد خاصية background-image لاستخدامها كخلفية لأحد العناصر. بشكل افتراضي ، تكرر الصورة نفسها لتغطية كامل سطح العنصر.
background-image: url("GitHub-Mark.png");
صورة الخلفية - التكرار
افتراضيًا ، تتكرر خاصية background-image على المحور X و Y. إذا كنت تريد تعيين محور ، مثل X axis ، فاستخدم نوع خاصية background-repeat :
background-image: url("GitHub-Mark.png"); background-repeat: repeat-x;
ولكن في بعض الأحيان لا تريد أن يكون لديك خلفية على جميع الأسطح ، يجب عليك تحديدها بكتابة:
background-image: url("GitHub-Mark.png"); background-repeat: no-repeat;
صورة الخلفية - الوظيفة
يمكنك تحديد موضع الخلفية بكتابة:
background-image: url("GitHub-Mark.png"); background-repeat: no-repeat; background-position : left bottom;
سيعين لك خلفية في الجزء السفلي الأيمن من العنصر.
صورة الخلفية - موقف ثابت
إذا كنت ترغب في الحصول على صورة خلفية لن يتم تمريرها مع بقية الصفحة ، فيمكنك استخدام خاصية background-attachement :
background-image: url("GitHub-Mark.png"); background-repeat: no-repeat; background-position: left bottom; background-attachment: fixed;
خاصية الاختزال
يمكنك تمرير جميع الخصائص في background خاصية فائقة واحدة:
background: #F00 url("GitHub-Mark.png") no-repeat fixed left bottom;
عند استخدام خاصية الاختزال ، يجب عليك احترام هذا الطلب:
- لون الخلفية
- الصورة الخلفية
- تكرار الخلفية
- مرفق الخلفية
- موقف الخلفية
لا يهم ما إذا كان هناك عنصر واحد مفقود ، طالما أنك تحترم الطلب:
background: url("GitHub-Mark.png") no-repeat left bottom;
سيعمل هذا حتى إذا كان اللون والمرفق مفقود.