تغییر ظاهر پس زمینه در CSS
برای تغییر ظاهر پس زمینه از صفت background استفاده می کنیم .
جاداره اینجا به یک موضوع مهم و کاربردی اشاره کنم و آن هم استفاده از بعضی از صفاتcss هست که مرورگر اکسپلورر از آن پشتیبانی نمی کنه و همیشه برای طراح های وب سایت دردسر ساز هست . به همین دلیل من برای هر صفت مرورگرهای پشتیبانی کننده را می نویسم .
مرورگرهای پشتیبانی کننده : تمام مرورگرها
صفت Background :
یک صفت کاربردی بوده که برای تنظیم تمام صفات از آن استفاده می شود .
این صفت دارای مقدارهای
background-color :
background-image :
background- repeat :
background-attachment :
background- position :
background-image :
background- repeat :
background-attachment :
background- position :
می باشد که هر کدام از مقدارها نیز دارای ویژگیهای خاص خود می باشند که به ترتیب توضیح میدهم و یک مثال برای شما در یک صفحه جدید تا دقیق تغییرات را احساس کنید.
اولین مقدار background-color بود که دارای ویژگی مقدار رنگ به صورت عددی یا هگزاد دیسمال می باشد .من صفحه html را ایجاد کردم برای اینکه تغییرات را مشاهده کنید روی دموهای ایجاد شده کلیک تا با تغییرات ویژگیها بیشتر آشنا بشوید .
اولین مقدار background-color بود که دارای ویژگی مقدار رنگ به صورت عددی یا هگزاد دیسمال می باشد .من صفحه html را ایجاد کردم برای اینکه تغییرات را مشاهده کنید روی دموهای ایجاد شده کلیک تا با تغییرات ویژگیها بیشتر آشنا بشوید .
body
{
background-color : #000000 ;
}
صفت background-image
یک تصویر برای پس زمینه مشخص می کند
URL تابعی است که مسیر تصویر پس زمینه را مشخص می کند.
یک تصویر برای پس زمینه مشخص می کند
URL تابعی است که مسیر تصویر پس زمینه را مشخص می کند.
body
{
{
background-image : url (logo2.jpg) ;
}
مشاهده دموی ویژگی بالا
مشاهده دموی ویژگی بالا
صفت background-repeat
نحوه تکرار شدن تصویر را مشخص می کند .
مقدار repeat : به صورت افقی و عمودی تصویر را تکرار می کند .
مقدار repeat-x : به صورت افقی تصویر را تکرار می کند.
مقدارrepeat-y: به صورت عمودی تصویر را تکرار می کند .
no-repeat : تصویر بدون تکرار نمایش داده می شود .
مقدار repeat : به صورت افقی و عمودی تصویر را تکرار می کند .
مقدار repeat-x : به صورت افقی تصویر را تکرار می کند.
مقدارrepeat-y: به صورت عمودی تصویر را تکرار می کند .
no-repeat : تصویر بدون تکرار نمایش داده می شود .
body
{
{
background-image : url (logo2.jpg);
background-repeat : repeat-x ;
background-repeat : repeat-x ;
}
صفت background-attachment
این صفت برای تصویر زمینه بکار می رود . مشخص می کند تصویر چه حالتی داشته باشد یا ثابت یا اسکرول. اگر در حالت اسکرول باشد با استفاده از اسکرول ها تصویر زمینه قادر به حرکت است اما در حالت Fixed قادر به حرکت نمی باشد .
این صفت موقعیت تصویر زمینه را مشخص می کند. اگر مختصات از 0% .0% استفاده کنید موقعیت تصویر در بالا و سمت چپ قرار می گیرد و اگر مختصات 100% . 100% استفاده کنید موقعیت را در پایین و سمت راست قرار می دهد. اگر از یک مختصات استفاده کنید دیگری 50% خواهد بود.
صفت background-position دارای مقدارهای زیر می باشد
این صفت برای تصویر زمینه بکار می رود . مشخص می کند تصویر چه حالتی داشته باشد یا ثابت یا اسکرول. اگر در حالت اسکرول باشد با استفاده از اسکرول ها تصویر زمینه قادر به حرکت است اما در حالت Fixed قادر به حرکت نمی باشد .
body
{
{
background-attachment :scroll ;
}
صفت background-positionاین صفت موقعیت تصویر زمینه را مشخص می کند. اگر مختصات از 0% .0% استفاده کنید موقعیت تصویر در بالا و سمت چپ قرار می گیرد و اگر مختصات 100% . 100% استفاده کنید موقعیت را در پایین و سمت راست قرار می دهد. اگر از یک مختصات استفاده کنید دیگری 50% خواهد بود.
صفت background-position دارای مقدارهای زیر می باشد
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
body
{
background-image : url (logo2.jpg);
background-position : top left ;
{
background-image : url (logo2.jpg);
background-position : top left ;
}
آموزش CSS - مشخص کردن عرض و ارتفاع جدول در CSS