تغییر در رنگ زمینه

وردپرسی | طراحی سایت با وردپرس

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

تغییر در رنگ زمینه

  • 137 بازدید
  • ۳۰ دی, ۱۳۹۲

برای تغییر رنگ قسمتهای مختلف سایت از خاصیت background در سی اس اس استفاده می شود. در ادامه تمامی حالات تغییر رنگ زمینه را به کمک css بررسی خواهیم کرد.

background-color

برای تغییر در رنگ زمینه هر چیزی مثل صفحه وب یا جدول یا یک سطر از جدول یا یک سلول جدول یا زمینه یک لایه بکار می رود

background-color:رنگ;

 مثال :

body {background-color:#b0c4de;}
رنگ زمینه صفحه وب را تغییر می دهد
مشاهده و اجرای برنامه کامل
مثال :
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
خط ۱:
رنگ زمینه محتوای تمام تگ های h1 در صفحه وب
خط ۲:
رنگ زمینه مجتوای تمام تگ های p در صفحه وب
خط ۳:
رنگ زمینه محتوای  تمام تگ های div در صفحه وب
مشاهده و اجرای برنامه کامل

 


background-image

 

 

برای تغییر در تصویر زمینه هر چیزی مثل صفحه وب یا جدول یا یک سطر از جدول یا یک سلول جدول یا زمینه یک لایه بکار می رود

روش استفاده :

background-image :url("ادرس و نام تصویر همراه پسوند آن");

مثال :

body {
background-image:url('paper.gif');
}
تصویری به نام paper.gif را در زمینه صفحه وب قرار می دهد
مشاهده و اجرای برنامه کامل

background-repeat

روش تکرار شدن تصویر زمینه را مشخص می کند

background-repeat:no-repeat;
background-repeat:repeat-x;
background-repeat:repeat-y;
background-repeat:repeat;

 

بصورت عملی مشاهده کنید

 

فرمول اول

اصلا تصویر در زمینه تکرار نشود و فقط یک نمونه از ان نشان داده شود

مثال

body
{
background-image:url('gradient2.png');
background-repeat:no-repeat;
}

مشاهده و اجرای برنامه کامل

 

فرمول دوم

از تصویر فقط یک ردیف افقی  در صفحه  تکرار شود

مثال

 

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

مشاهده و اجرای برنامه کامل

 

فرمول سوم

 

از تصویر فقط یک ردیف عمودی در صفحه تکرار شود

 

فرمول چهارم

تصویر در جهت افقی و عمودی انقدر تکرار می شود تا تمام صفحه را پر کند

 


background-position

در صورتیکه no -repeat را انتخاب کرده اید می توانید محل نمایش داده شدن تصویر زمینه در صفحه وب را مشخص کنید

 

مثال:

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

خط ۵:

تصویر زمینه را در بالا و سمت راست صفحه وب قرار می دهد

مشاهده و اجرای برنامه کامل

روش تعیین محل

روش اول

از عبارات زیر استفاده کنید :

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

مشاهده برنامه

روش دوم :

x%  y%

تعیین محل تصویر بر حسب درصد

گوشه بالا و سمت چپ صفحه مرورگر برابر ۰%,۰%

گوشه پائین  و سمت راست مرورگر برابر ۱۰۰% , ۱۰۰%

اگر شما فقط یکی از مقادیر را مشخص کنید دیگری برابر ۵۰% خواهد شد

مقدار پیش فرض برابر ۰% و ۰% است

مشاهده برنامه

روش سوم :

 موقعیت قرار گیری تصویر زمینه را بر حیب پیکسل بیان نمائید

گوشه بالا و سمت چپ صفحه ۰و۰

واحد اندازه گیری می تواند پیکسل و یا هر واحد دیگری باشد  مشاهده واحدها

اگر فقط یکی از x یا y را مشخص کنید دیگری برابر ۵۰% خواهد شد

شما می توانید درصد و عدد را با هم بکار ببرید

مشاهده برنامه

background

می توان تمامی ویژگیهای بالا را در یک ویژگی نوشت و بین انها جای خالی قرار داد

background:#ffffff url('img_tree.png') no-repeat right top;

اولین گزینه = رنگ

دومین گزینه = ادرس تصویر

سومین گزینه = روش تکرار تصویر زمینه

چهارمین گزینه و پنجمین گزینه = محل تصویر زمینه در صورت تکراری نبودن ان

مشاهده و اجرای برنامه کامل

ادامه مطلب: آموزش طراحی سایت




ارسال نظر