خواص مقدماتی CSS
پس زمينه Background :
از خاصيت پس زمينه ( background ) در CSS برای تعيين يک رنگ يا تصوير به عنوان پس زمينه
يک عنصر مثل جدول يا صفحه استفاده می شود .
خاصيت background :
خاصيت چند مقداری برای دريافت کليه ويژگی های پس زمينه عنصر است که هر يک از ويژگی
ها بايد به ترتيب زير در خاصيت background وارد شود :
background : [ backgronud-color ] [ background-image
] [ background-repeat ] [ background-attachement ] [background-position ]
توجه : هر يک از خواص فوق را می توان به صورت تکی نيز
، تعريف و مقدار دهی کرد . به مثال های پايين صفحه دقت کنيد .
در جدول زير هر يک از ويژگی های فوق را بررسی می کنيم :
|
نام خاصيت
|
نوع خاصيت |
شرح |
|
background-color |
نام رنگ
rgb (r,g,b)
عدد هگزادسيمال
|
تعيين کننده يک رنگ به عنوان پس زمينه عنصر است . رنگ میتواند به روش های زير تعيين
شود :
- نام رنگ مثل blue يا red .
- تعيين رنگ به وسيله تابع rgb به صورت زير :
( مقدار رنگ قرمز ، مقدار رنگ سبز ، مقدار رنگ آبی ) rgb
اين تابع مقدار 3 رنگ را با هم ترکيب کرده و يک رنگ را ايجاد می کند .که مقدار رنگ
توسط عددی بين 0 تا 255 تعيين می شود ، که هر چه عدد بزرگتر باشد ميزان آن رنگ در کل
رنگ بيشتر خواهد بود .
Example : rgb (10,65,232)
- نعيين رنگ به صورت عددی ترکيبی در مبنای 16 هگزادسيمال :
ميزان رنگ آبی ميزان رنگ سبز ميزان رنگ قرمز #
Example : #08FF00
|
|
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
|
تعيين می کند کند که آيا عکسی که به عنوان پس زمينه عنصر انتخاب شده است ، ثابت باشد
و يا با حرکت عنصر در هنگام بالا و پايين رفتن صفحه ، آن عکس نيز حرکت کند . اين مسئله
در مواردی مثل تعيين پس زمينه برای کل يک صفحه که در آن اندازه عکس بزرگتر از کل محدوده
قابل نمايش در مرورگر است ، کاربرد دارد . که 2 حالت زير را می تواند داشته باشد :
- scroll : عکس با حرکت عنصر حرکت می کند .
- fixed : عکس ثابت بوده و با حرکت عنصر حرکت نمی کند .
|
|
background-position |
top
bottom
center
left
right
|
مکان شروع قرارگيری عکس را در پس زمينه عنصر تعيين می کند . اين حالت معمولا در هنگام
کوچکتر بودن عکس از پس زمينه عنصر کاربرد دارد و می تواند يکی از حالت های زير باشد
:
- top : بالای عنصر .
- bottom : پايين عنصر
- center : در مرکز عنصر .
- left : در سمت چپ عنصر .
- right : در سمت راست عنصر .
|
مثال : در جدول زير چندين حالت ويژگی background را در عنصر
table و td نشان داده ايم :
< table style="background-color: #10AA32" >
< tr >
< td >
اين خانه جدول دارای رنگ پس زمينه جدول
است
< /td >
< /tr >
< tr >
< td style="background-color: Blue" >
اين خانه دارای يک پس زمينه با رنگ مخصوص
به خود است که توسط خاصيت style آن تعيين شده است
< /td >
< /tr >
< /table >
|
|
اين خانه جدول دارای رنگ پس زمينه جدول است
|
|
اين خانه دارای يک پس زمينه با رنگ مخصوص به خود است که توسط خاصيت style آن تعيين
شده است
|
|
< table style= "background-image : url(../pic/bgexample.jpg)
; background-repeat : repeat ; background-attachment : fixed ; background-position
: top ; width : 100% ; height : 200px" >
< tr >
< td >
اين جدول دارای پس زمينه تصويری است
< /td >
< /tr >
< /table >
|
|
اين جدول دارای پس زمينه تصويری است
|
|
|
نکته مهم : در مثال دوم هر يک از ويژگی های background را
به صورت تکی مقدار دهی کرده ايم . تمام آن ويژگی ها را می توان به صورت زير در خاصيت
چند مقداری background نيز تعيين کنيم :
< table style="background : url(../pic/bgexample.jpg) repeat fixed top" >
... .
|
مثال : همچنين می توان به يک متن نيز رنگ پس زمينه داد ،
به مثال زير توجه کنيد :
< p style="background-color: Green" >
This paragraph has a background color .
< /p >
|
|
This paragraph has a background color .
|