خصائص التحكم في الألوان وخلفيات

سنتعرف اليوم على خصائص الألوان والخلفيات، وسنتعلم كيف نضع الألوان للنصوص والخلفيات وكيف نستخدم الصور كخلفية من خلال هذه الخصائص، ونتعرف عن خاصية تكرار الصورة وخاصية تثبيت الصورة وخاصية تحديد مكان الصورة على شاشة المتصفح، كما أننا سنتعلم كيفية جمع كل خصائص الخلفيات في خاصية واحدة.

خاصية اللون color

color: #ff0000;

color: transparent;

خاصية الخلفية background-color

background-color: #FFCC66;

background: #CECECE;

background: transparent;

خاصة الصورة كخلفية background-image

background-image: url("butterfly.gif");

background: url("butterfly.gif");

خاصية تكرار الصورة background-repeat

الصورة ستتكرر أفقياً

background-repeat: repeat-x;

الصورة ستتكرر عمودياً

background-repeat: repeat-y;

الصورة ستتكرر أفقياً وعمودياً

background-repeat: repeat;

الصورة لن تتكرر

background-repeat: no-repeat;

خاصية تثبيت صورة الخلفية background-attachment

الخاصية background-attachment تحدد ما إذا كانت صورة الخلفية ثابتة أو متحركة مع محتويات العنصر.

الصورة ستتحرك مع الصفحة

Background-attachment: scroll;

الصورة ستبقى ثابتة

Background-attachment: fixed;

خاصية مكان صورة الخلفية background-position

أعلى يمين الصفحة

background-position: top right;

منتصف المسافة من يسار الشاشة وربع المسافة من أعلى الشاشة

background-position: 50% 25%;

على بعد 2 سنتم من يسار الشاشة و2 سنتم من أعلى الشاشة

background-position: 2cm 2cm;

جمع كل الخصائص  background

هذه الخصائص:

background-color: #FFCC66;

background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;

يمكن اختصارها باستخدام الخاصية background

background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;

القائمة ترتب بهذا الشكل - من اليسار إلى اليمين:

background-color | background-image | background-repeat | background-attachment | background-position

خصائص إضافية

background: #FFF url(رابط الصورة) no-repeat 7px 8px;
background: #FFF url(رابط الصورة) repeat-x 1px 1px;