Instagram
اخبار سایت :
  • هیچی فقط همیشه سالم و سلامت باشین :دی

آموزش 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

attention
توجه داشته باشید که برای استفاده از این نوع کد ها (مثلا قرمز با کد 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;
}


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


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

نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
کد امنیتیرفرش کد امنیتی
کلاس های آنلاین فعال

برای افزایش دانش عمومی کاربران سعی بر این داریم که کلاس های آنلاینی برگزار کنیم. لیست این کلاس (ها) را می توانید در زیر ببینید. این قسمت را هر روز چک کنید تا از کلاس ها و اخبار جدید با خبر شوید. کلاس ها توسط همین کاربران و دوستان شما برگزار میشود. اگر مایل به برپایی کلاس آموزشی ای در هر زمینه ای هستید با مدیر تماس بگیرید.

مدرس: محمد و اقبال
آموزش PHP - جلسه اول
پنجشنبه 04 تیر 1394 - 17:00
هیچ کلاس فعالی موجود نیست.
کاربران آنلاین
آمار
مطالب : 792
نظرات : 4408
تعداد اعضا : 36793
افراد آنلاین : 3
بازدید امروز : 53
بازدید دیروز : 840
گوگل امروز : 0
گوگل دیروز : 17
بازدید هفته : 1,819
بازدید ماه : 15,343
بازدید سال : 83,783
بازدید کلی : 10,865,485