آموزش مقدماتی CSS خواص مقدماتی (پس زمینه) – جلسه سوم

در جلسه قبل از آموزش css در مورد نحوه استایل دهی به قلم و نوشته که در حقیقت همان خاصیت font بود آشنا شدید ، در این پست خاصیت‌های پس زمینه در css را بررسی خواهیم کرد.

خاصیت پس زمینه در css - background

 

خاصیت background :

پس زمینه یا background در css برای تعیین یک رنگ یا تصویر به عنوان بک گراند یک جدول یا صفحه به کار می‌رود.

در جدول زیر هر یک از ویژگی های خاصیت چند مقداری background در css را بررسی می کنیم :

خواص background
نام خاصیت مقدار قابل قبول توضیحات
background-color نام رنگ
rgb (r,g,b)
عدد هگزادسیمال
تعیین کننده یک رنگ به عنوان پس زمینه عنصر است که میتواند به روش های زیر تعیین شود :

  1. نام رنگ مثل blue یا red
  2. تعیین رنگ به وسیله تابع rgb به صورت زیر :
    ( مقدار رنگ قرمز ، مقدار رنگ سبز ، مقدار رنگ آبی ) rgb
  3. نعیین رنگ به صورت عددی ترکیبی در مبنای ۱۶ هگزادسیمال :
    میزان رنگ آبی میزان رنگ سبز میزان رنگ قرمز #
background-image URL
مسیر فایل
مسیر کامل عکس را که به عنوان پس زمینه عنصر استفاده خواهد شد ، را تعیین می کند
background-repeat repeat
repeat-x
repeat-y
no-repeat
چنانچه عکس انتخابی به عنوان پس زمینه یک عنصر از اندازه آن عنصر کوچکتر باشد ، تعیین می کند که آیا با تکرار عکس در سطح پس زمینه عنصر ، کل آنرا بپوشاند یا خیر ؟ که حالت های تکرار به صورت زیر می تواند باشد :
repeat : تکرار عکس در جهت افقی و عمودی
repeat-x : تکرار عکس فقط در جهت محورها x ها
repaet-y : تکرار عکس فقط در جهت محور y ها
no-repaet : بدون تکرار
background-attachement scroll
fixed
تعیین می کند کند که آیا عکسی که به عنوان پس زمینه عنصر انتخاب شده است ، ثابت باشد و یا با حرکت عنصر در هنگام بالا و پایین رفتن صفحه ، آن عکس نیز حرکت کند که ۲ حالت زیر را می تواند داشته باشد :
scroll : حرکت عکس با حرکت عنصر
fixed : ثابت بودن عکس با حرکت عنصر
background-position top
bottom
center
left
right
مکان شروع قرارگیری عکس را در پس زمینه عنصر مشخص می کند که معمولا در هنگام کوچکتر بودن عکس از پس زمینه عنصر کاربرد دارد و می تواند در یکی از حالت های زیر باشد :
top : بالای عنصر
bottom : پایین عنصر
center : در مرکز عنصر
left : در سمت چپ عنصر
right : در سمت راست عنصر

 

از ویژگی های خاصیت background در css می شود به صورت یک جا نیز استفاده کرد که شکل کلی آن به صورت زیر می باشد :

background : [ backgronud-color ] [ background-image ] [ background-repeat ] [ background-attachement ] [background-position ] 
< div style="background-color:blue;width:100%;">
	< div style="background-image:url('../images.png');color:red;background-repeat:repeat;width:80%;">
	آموزش پس زمینه در سی اس اس
	< /div >
< /div >

خروجی دستورات بالا :

در این مثال ابتدا یک لایه با پس زمینه آبی و طول تمام صفحه ایجاد کردیم ، سپس درون آن یک لایه دیگر با پس زمینه عکس هاشور ، طول ۸۰ درصد و خاصیت تکرار بک گراند در حالت تکرار در دو جهت افقی و عمودی تنظیم کردیم

 

آموزش پس زمینه در سی اس اس
نگارش و انتشار توسط میلاد صادقیان

فعال در زمینه های : برنامه نویسی پویا تحت ویندوز ، طراحی رابط کاربری UI ، توسعه و طراحی وب

دیدگاه شما

ایمیل شما نزد ما محفوظ خواهد بود.