نحوه کار با خاصیت background در زبان CSS همراه با مثال
نحوه کار با خاصیت background در زبان CSS همراه با مثال
بعد از آموزش در مورد نحوه نمایش شیوه نامه متن و نوشته که در جلسه قبلی مشاهده کردیم می خواهیم در این جلسه به یکی از خاصیت های مهم در زبان CSS یعنی خاصیت background اشاره کنیم.
خاصیت background یکی از خواص مهم و کاربردی هست که شما حتما در طراحی سایت به آن نیاز خواهید داشت و از استفاده خواهید کرد.
در این جلسه آموزشی می خواهیم شما را با این خاصیت آشنا کنیم و دستورات آن را مرور کنیم، در انتها هم مثال کاربردی از نحوه ی استفاده از خاصیت background را برای شما می آوریم که امیدواریم برای شما مفید باشد. پس با کدنویسی به زبان ساده همراه باشید.
پس زمینه صفحه با خاصیت background
تعریف : از خاصیت پس زمینه ( background ) در CSS برای تعیین یک رنگ یا تصویر به عنوان پس زمینه یک عنصر مثل جدول یا صفحه استفاده می شود.
خاصیت background
خاصیت چند مقداری برای دریافت کلیه ویژگی های پس زمینه عنصر است که هر یک از ویژگی ها باید به ترتیب زیر در خاصیت background وارد شود :
background : [ backgronud-color ] [ background-image ] [ background-repeat ] [ background-attachement ] [background-position ]
توجه : هر یک از خواص فوق را می توان به صورت تکی نیز، تعریف و مقدار دهی کرد. به مثال های پایین صفحه دقت کنید.
در جدول زیر هر یک از ویژگی های فوق را بررسی می کنیم :
|
خاصیت background |
||
|
نام خاصیت |
نوع خاصیت |
شرح |
|
background-color |
نام رنگ rgb (r,g,b) عدد هگزادسیمال |
تعیین کننده یک رنگ به عنوان پس زمینه عنصر است . رنگ میتواند به روش های زیر تعیین شود : نام رنگ مثل blue یا red تعیین رنگ به وسیله تابع rgb به صورت زیر : ( مقدار رنگ قرمز ، مقدار رنگ سبز ، مقدار رنگ آبی ) rgb این تابع مقدار ۳ رنگ را با هم ترکیب کرده و یک رنگ را ایجاد می کند. که مقدار رنگ توسط عددی بین ۰ تا ۲۵۵ تعیین می شود ، که هر چه عدد بزرگتر باشد میزان آن رنگ در کل رنگ بیشتر خواهد بود. Example : rgb (10,65,232) نعیین رنگ به صورت عددی ترکیبی در مبنای ۱۶ هگزادسیمال : میزان رنگ آبی میزان رنگ سبز میزان رنگ قرمز # Example : #08FF00 |
|
background-image |
URL |
مسیر کامل یک عکس را که قرار است به عنوان پس زمینه عنصر استفاده شود ، را تعیین می کند . |
|
background-repeat |
repeat |
چنانچه عکس انتخابی به عنوان پس زمینه یک عنصر از اندازه آن عنصر کوچکتر باشد ، تعیین می کند که آیا با تکرار عکس در سطح پس زمینه عنصر ، کل آنرا بپوشاند یا خیر. که حالت های تکرار به صورت زیر می تواند باشد : – repeat : عکس در جهت افقی و عمودی تکرار خواهد شد. – repeat-x : عکس فقط در جهت محورها x ها یعنی افقی تکرار خواهد شد. – repaet-y : عکس فقط در جهت محور y ها یعنی عمودی تکرار خواهد شد. – no-repaet : عکس در هیچ جهتی تکرار نخواهد شد ، که انتخاب پیش فرض است. |
|
background-attachement |
scroll |
تعیین می کند کند که آیا عکسی که به عنوان پس زمینه عنصر انتخاب شده است ،ثابت باشد و یا با حرکت عنصر در هنگام بالا و پایین رفتن صفحه ، آن عکس نیز حرکت کند. این مسئله در مواردی مثل تعیین پس زمینه برای کل یک صفحه که در آن اندازه عکس بزرگتر از کل محدوده قابل نمایش در مرورگر است ، کاربرد دارد. که ۲ حالت زیر را می تواند داشته باشد : – scroll : عکس با حرکت عنصر حرکت می کند. – fixed : عکس ثابت بوده و با حرکت عنصر حرکت نمی کند. |
|
background-position |
top |
مکان شروع قرارگیری عکس را در پس زمینه عنصر تعیین می کند. این حالت معمولا در هنگام کوچکتر بودن عکس از پس زمینه عنصر کاربرد دارد و می تواند یکی از حالت های زیر باشد : – top : بالای عنصر. – bottom : پایین عنصر. – center : در مرکز عنصر. – left : در سمت چپ عنصر. – right : در سمت راست عنصر. |
مثال ۱ : در جدول زیر چندین حالت ویژگی از خاصیت background را در عنصر table و td مشاهده خواهید کرد :
< table style="background-color: #10AA32" >
< tr >
< td >
این خانه جدول دارای رنگ پس زمینه جدول است
< /td >
< /tr >
< tr >
< td style="background-color: Blue" >
این خانه دارای یک پس زمینه با رنگ مخصوص به خود است
که توسط خاصیت استایل آن تعیین شده است
< /td >
< /tr >
< /table >
مثال ۲ : در این مثال یک تصویر که از فضای یک سلول جدول کوچکتر است، به عنوان پس زمینه قرار داده شده است.
< table style= "background-image:url(../pic/youcode.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/youcode.jpg) repeat fixed top" >مثال ۳ : همچنین می توان به یک متن نیز رنگ پس زمینه داد ، به مثال زیر توجه کنید :
<p style="background-color: Green"> This paragraph has a background color. </p>
خب در انتهای این جلسه از سری آموزشی زبان CSS با خاصیت background آشنا شدید. در ادامه به خاصیت های دیگری از این زبان محبوب استایل دهی به صفحات وب خواهیم گفت.
