تغییر ظاهر پس زمینه با Css

Sina

Administrator
پرسنل مدیریت
2013-05-11
4,709
2,901
113
چابکســـر
برای تغییر ظاهر پس زمینه از صفت background استفاده می کنیم .
جاداره اینجا به یک موضوع مهم و کاربردی اشاره کنم و آن هم استفاده از بعضی از صفاتcss هست که مرورگر اکسپلورر از آن پشتیبانی نمی کنه و همیشه برای طراح های وب سایت دردسر ساز هست . به همین دلیل من برای هر صفت مرورگرهای پشتیبانی کننده را می نویسم .

مرورگرهای پشتیبانی کننده : تمام مرورگرها


صفت Background :
یک صفت کاربردی بوده که برای تنظیم تمام صفات از آن استفاده می شود .
این صفت دارای مقدارهای

HTML:
background-color :background-image :background- repeat :background-attachment :background- position :

می باشد که هر کدام از مقدارها نیز دارای ویژگیهای خاص خود می باشند که به ترتیب توضیح میدهم و یک مثال برای شما در یک صفحه جدید تا دقیق تغییرات را احساس کنید.
اولین مقدار background-color بود که دارای ویژگی مقدار رنگ به صورت عددی یا هگزاد دیسمال می باشد .من صفحه html را ایجاد کردم برای اینکه تغییرات را مشاهده کنید روی دموهای ایجاد شده کلیک تا با تغییرات ویژگیها بیشتر آشنا بشوید .

HTML:
body{background-color : #000000 ;}



صفت background-image
یک تصویر برای پس زمینه مشخص می کند
URL
تابعی است که مسیر تصویر پس زمینه را مشخص می کند.

HTML:
body{background-image : url (logo2.jpg) ;}

صفت background-repeat
نحوه تکرار شدن تصویر را مشخص می کند .
مقدار repeat :
به صورت افقی و عمودی تصویر را تکرار می کند .
مقدار repeat-x : به صورت افقی تصویر را تکرار می کند.
مقدارrepeat-y: به صورت عمودی تصویر را تکرار می کند .
no-repeat : تصویر بدون تکرار نمایش داده می شود .​

HTML:
body{background-image : url (logo2.jpg);background-repeat : repeat-x ;}

صفت background-attachment
این صفت برای تصویر زمینه بکار می رود . مشخص می کند تصویر چه حالتی داشته باشد یا ثابت یا اسکرول. اگر در حالت اسکرول باشد با استفاده از اسکرول ها تصویر زمینه قادر به حرکت است اما در حالت Fixed قادر به حرکت نمی باشد .

HTML:
body{background-attachment :scroll ;}

صفت background-position
این صفت موقعیت تصویر زمینه را مشخص می کند. اگر مختصات از 0% .0% استفاده کنید موقعیت تصویر در بالا و سمت چپ قرار می گیرد و اگر مختصات 100% . 100% استفاده کنید موقعیت را در پایین و سمت راست قرار می دهد. اگر از یک مختصات استفاده کنید دیگری 50% خواهد بود.
صفت background-position دارای مقدارهای زیر می باشددارای مقدارهای زیر می باشد

HTML:
top lefttop centertop rightcenter leftcenter centercenter rightbottom leftbottom centerbottom rightx-% y-%body{background-image : url (logo2.jpg);background-position : top left ;}

منبع: learning.asarayan.com
 
  • Like
واکنش‌ها[ی پسندها]: سحریی

درباره ما

  • خوش آمدید ؛ یه حسِ خوب یک انجمن است که شما می توانید در آن عضو شده از امکانات آن استفاده کرده و دوستان جدید پیدا کنید. این مجموعه دارای نظارت 24 ساعته بوده تا محیطی سالم را برای کاربران خود فراهم آورد،از کاربران انتظار می رود که با رعایت قوانین ما را برای رسیدن به این هدف یاری کنند.
    از طرف مدیر وب سایت:
    "همواره آرزو دارم که هربازدید کننده ای بعد از ورود به انجمن، با یه حسِ خوب اینجارو ترک کنه!"

منوی کاربر