پس زمينه Background :
از خاصيت پس زمينه ( background ) در CSS برای تعيين يک رنگ يا تصوير به عنوان پس زمينه يک عنصر مثل جدول يا صفحه استفاده می شود .
خاصيت background :
خاصيت چند مقداری برای دريافت کليه ويژگی های پس زمينه عنصر است که هر يک از ويژگی ها بايد به ترتيب زير در خاصيت background وارد شود :
background : [ backgronud-color ] [ background-image ] [ background-repeat ] [ background-attachement ] [background-position ]
توجه : هر يک از خواص فوق را می توان به صورت تکی نيز ، تعريف و مقدار دهی کرد . به مثال های پايين صفحه دقت کنيد .
در جدول زير هر يک از ويژگی های فوق را بررسی می کنيم :
| خواص background | ||
| نام خاصيت | نوع خاصيت | شرح |
| background-color | نام رنگ rgb (r,g,b) عدد هگزادسيمال |
تعيين کننده يک رنگ به عنوان پس زمينه عنصر است . رنگ میتواند به روش های زير تعيين شود :
|
| 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 نشان داده ايم :
| Example | |||
| < table style="background-color: #10AA32" > < tr > < td > اين خانه جدول دارای رنگ پس زمينه جدول است < /td > < /tr > < tr > < td style="background-color: Blue" > آن تعيين شده است style اين خانه دارای يک پس زمينه با رنگ مخصوص به خود است که توسط خاصيت < /td > < /tr > < /table > |
کد | ||
|
خروجی | ||
| در مثال دوم يک تصوير که کوچکتر از خانه جدول است ، به عنوان پس زمينه جدول تعيين شده است . | |||
| < 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" > |
|||
مثال : همچنين می توان به يک متن نيز رنگ پس زمينه داد ، به مثال زير توجه کنيد :
| Example | |
| < p style="background-color: Green" > This paragraph has a background color . < /p > |
کد |
|
This paragraph has a background color . |
خروجی |
منبع: دنیای فناوری با حساس کامپیوتر
