آموزش background و زیر دسته های آن در CSS

من در این آموزش قصد دارم به شما نحوه گذاشتن پس زمینه در css رو به شما یاد بدم.

شما با استفاده از این آموزش توانایی های زیادی در ضمینه ساخت و طراحی قالب های زیبا خواهید پیدا کرد. به شرط این که به html کاملا واقف باشید. چرا که در یک قالب مهمترین قسمت ها و مهترین چیز در یک قالب زیبایی و تصاویر استفاده شده در پس زمینه هاست.

قبل از شروع به این مثال توجه کنید:

مثال

background به دسته های زیر تقسیم می شود:

background دارای زیر مجموعه هایی است که در زیر به برخی از آنها اشاره شده است.

گزينه	توضيحات
background-image	به شما اجازه گذاشتن تصویر را در پس زمینه می دهد.
background-color	بر رنگ پس زمینه تاثیر می گذارد.
background-repeat	برای تکرار کردن ، نکردن و یا چگونه تکرار کردن پس زمینه (پس زمینه تصویر) به کار می ورد.
background-size	برای تغییر اندازه پس زمینه به کار می رود (CSS3 می باشد و با بعضی از مرورگر ها سازگار نیست).
background-attachment	برای ثابت نگه داشتن (مثلا حالا fixed) پس زمینه
background-position	برای راست ، وسط و چپ بردن تصویر پس زمینه)
background-origin	با استفاده از خاصیت padding و ... عمل می کند. (برای تصاویر - ورژن 3 - در بعضی مرورگر ها عمل نمی کند)
background-clip	با استفاده از خاصیت padding و ... عمل می کند. (برای رنگ ها - ورژن 3 - در بعضی مرورگر ها عمل نمی کند)

نحوه استفاده از انتخابگر background

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

div{
background: url(http://rozup.ir/up/moisrex/Pictures/icon/moisrex.png) no-repeat center top gray;
}

قسمت url در background

این قسمت مربوط به background-image می باشد که شما کلمه url را نوشته و در جلو آن بین پرانتز آدرس پس زمینه را می نویسید. شما در background-image فقط مجاز به استفاده از پس زمینه تصویر را دارین و هر گونه کدی که مربوط به قسمت های دیگر است بر آن اثری ندارد.

div{
background-image: url(http://rozup.ir/up/moisrex/Pictures/icon/moisrex.png);
}

چه رنگ هایی وجود دارد؟ چگونه رنگ ها را بنویسیم؟

همون طور که دیدید شما می توانید از مقادیری مانند blue , red , black , brown , yellow و ... در پس زمینهاستفاده کنید که البته اگر در کدنویسی کمی حرفه ای تر شدید دیگر از این مقادیر کمتر استفاده می کنید و بیشتر به دنبال کد هر کدام از آنها می روید که می توانید آموزش مختصری را در این لینک یاد بگیرید. برای مثال به نمونه زیر برای رنگ سیاه توجه کنید:

div{
background: #eee;
}

که البته می توانید به جای eee از eeeeee استفاده کنید. در نوشتن رنگ ها شما می توانید در صورتی که دو عدد کناری مثل هم باشند آن را به صورت مختصر بنویسید. مثلا به جای FF0011 می توانید بنویسید F01

توجه داشته باشید که برای استفاده از این نوع کد ها (مثلا قرمز با کد FF0000) می بایست حتما قبل از آن از کاراکتر # استفاده کنید.

background-repeat

اگر به پس زمینه خیلی از وب ها نگاه کنید متوجه می شوید که پس زمینه ای که برای آن ها انتخاب شده است یک پس زمینه ی بسیار کوچیک که حتی اندازه برخی از آنها 1*1 نیر می باشد ولی همین یک پیکسل بار ها و بار ها در صفحه تکرار شده است و برای مثال خط های موربی را در صفحه ایجاد کرده است. تمام این کار با استفاده از background-repeat صورت گرفته است.

repeat به معنای تکرار کردن است و در صورتی که از آن استفاده شود پس زمینه شما به طور مداوم در صفحه مورد نظر تکرار می شود. ولی شما با استفاده از گزینه های زیر می توانید این تکرار ها را به طور دلخواه تغییر دهید:

repeat : تکرار تصویر در سمت های راست و چپ و بالا و پایین (محور x ها و y ها)
no-repeat : تکرار نکردن تصویر پس زمینه.
repeat-x : تکرار کردن تصویر در سمت راست (محور x ها)
repeat-y : تکرار کردن تصویر در سمت پایین و بالا (محور y ها)

div{
background-repeat: repeat;
}

background-position

شما در این قسمت می توانید پس زمینه خود را در وسط باکس ، راست باکس و چپ باکس قرار دهید. برای مثال تصویر پس زمینه شما در اندازه های 200*200 در باکسی با اندازه های 500*500 قرار دارد. شما با قرار دادن background-position در حالت center (وسط) پس زمینه شما در وسط باکس قرار می گیرد.

background-position می تواند تصویر پس زمینه را هم به صورت عمودی و هم به صورت افقی در سه حالت وسط ، راست و چپ قرار دهد.

background-position در حالت عمودی می تواند دارای گزینه های زیر باشد:

top : در بالای باکس (پیشفرض)
center : دروسط باکس (به صورت عمودی)
bottom : در پایین باکس

background-position در حالت افقی می تواند مقادیر زیر را داشته باشد:

right : پس زمینه را در سمت راست قرار می دهد.
center : پس زمینه را در وسط قرار می دهد.
left : پس زمینه را در سمت چپ قرار می دهد.

div{
background-position: repeat;
}

background-attachment

این گزینه به شما کمک می کند که تصویر پس زمینه شما را در صورتی که از صفحه بیرون برود (نتوان تمام باکس را به صور کامل یکجا دید) به حالت fixed در آورد که یعنی تصویردر صفحه متحرک باشد و همیشه در صفحه به نمایش در آید.

background-attachment می تواند یکی از گزینه های زیر را داشته باشد:

scroll : بدون ثابت ماندن در صفحه (پیشفرض)
fixed : ثابت ماندن در صفحه

div{
background-attachment: fixed;
}

توجه داشته باشید که در صورتی که شما یک تصویر را به عنوان پس زمینه قرار داده اید و مقداری از تصویر پس زمینه شما بدون رنگ باشد و با در واقع قسمتی از تصویر شما به رنگ پس زمینه ای که در آن قرار دارد در می آید باشد برای دادن رنگ خاصی به آن باید کد رنگ را بعد از قسمت url یا background-image قرار دهید. زیرا که آن یکی که در background جلو تر نوشته شده است روی آن یکی که عقب تر (دیر تر) نوشته شده است قرار می گیرد.

منبع این آموزش فقط و فقط سایت کدستان می باشد و کپی برداری از آن غیر مجاز است.

0 نظر

2110 بازدید

یکشنبه 28 آبان 1391 - 21:28

عنوان کد:
توضیحات: