- مدیر
- تیر 17, 1393
- 12:40 ب.ظ
- بدون نظر
خلاصه این مطلب :
بخش دوم اموزش:
در این بخش با صفت background و انواع مقادیر ان آشنا می شوید مانند :
background-color
background-image
background-attachment
background-repeat
background-position
پس زمینه(Backgraund)
Background-attachment = مشخص می کند که تصویر چه حالتی داشته باشد.
ثابت fixedیا اسکرول scrolls
Background-colors= برای رنگ پس زمینه عناصر به کار میرود:
مقادیری که میپذیرد:
Rgb(255,0,0)
#2f2f2f
Red
transparent
Background-image=یک تصویر را برای پس زمینه مشخص میکند:
مقادیر
url=آدرس تصویر مورد نظر.
None
Background-position=موقعیت تصویر زمینه را مشخص میکند
مقادیر:
Top left,Top center,Top right,Center left,Center center,Center right,Bottom left,Bottom center,Bottom right
X% y% = 0% 0% تصویر در بالا سمت چپ و 100% 100%پایین سمت راست واگر هم فقط از یک مختصات استفاده شود دیگری به صورت پیش فرض 50% است.
x-pos y-pos
background-repeat= برای چگونگی تکرارشدن تصویر:
repeat=به صورت افقی و عمودی تکرار می شود
repeat-x= به صورت افقی تکرار می شود
repeat-y= به صورت عمودی تکرار میشود
no-repeat
مثال:
Body
{
Background:#2f2f2f;
}
Body
{
Background: url(/img/bg.jpg) no-repeat top;
}
Body
{
Background: #2f2f2f url(/img/bg.jpg) no-repeat fixed top;
}
Background-attachment
Body
{
Background-image: url(/img/bg.jpg);
Background-attachment:scroll;
}
Background-color
Body
{
Background-color:#2f2f2f; /* rgb(124,245,132) or “red”*/
}
برای اضافه کردن توضیحات هم از */ در ابتدا و انتهای خط مورد نظر استفاده کنید. شما هنگامی که از صفت background-color استفاده می کنید نمی توانید از background-image استفاده کنید.
Body
{
Background-image: url(bg.jpg) ;
}
Body
{
Background-image: url(bg.jpg) ;/*انتخاب تصویر برای زمینه*/
Background-repeat:no-repeat;/*عدم تکرار */
Background-position:top left; /*موقعیت تصویر با لا چپ*/
}
صفت Background-positionفقط با صفت Background-image کاربرد دارد.
سایر قسمتهای این آموزش :
