loading...
مرجع آموزش برنامه نویسی و شبکه
پیام صادقپور بازدید : 36 جمعه 05 اردیبهشت 1393 نظرات (0)

بخش دوم اموزش:

در این بخش با صفت 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 کاربرد دارد.

 

پایان بخش دوم

ارسال نظر برای این مطلب

کد امنیتی رفرش
اطلاعات کاربری
  • فراموشی رمز عبور؟
  • آرشیو
    آمار سایت
  • کل مطالب : 35
  • کل نظرات : 0
  • افراد آنلاین : 1
  • تعداد اعضا : 9
  • آی پی امروز : 6
  • آی پی دیروز : 2
  • بازدید امروز : 8
  • باردید دیروز : 1
  • گوگل امروز : 0
  • گوگل دیروز : 0
  • بازدید هفته : 12
  • بازدید ماه : 77
  • بازدید سال : 466
  • بازدید کلی : 11,117