من در این آموزش قصد دارم به شما نحوه گذاشتن پس زمینه در 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
همون طور که از اسمش پیداست این کد به شما کمک می کنه که بتونید پس زمینه رو تغییر بدید. حالا یا در پس زمینه تصویر قرار بدبد با رنگ و یا هر دو با هم. به مثال زیر توجه کنید:
background: url(http://rozup.ir/up/moisrex/Pictures/icon/moisrex.png) no-repeat center top gray;
}
قسمت url در background
این قسمت مربوط به background-image می باشد که شما کلمه url را نوشته و در جلو آن بین پرانتز آدرس پس زمینه را می نویسید. شما در background-image فقط مجاز به استفاده از پس زمینه تصویر را دارین و هر گونه کدی که مربوط به قسمت های دیگر است بر آن اثری ندارد.
background-image: url(http://rozup.ir/up/moisrex/Pictures/icon/moisrex.png);
}
چه رنگ هایی وجود دارد؟ چگونه رنگ ها را بنویسیم؟
همون طور که دیدید شما می توانید از مقادیری مانند blue , red , black , brown , yellow و ... در پس زمینهاستفاده کنید که البته اگر در کدنویسی کمی حرفه ای تر شدید دیگر از این مقادیر کمتر استفاده می کنید و بیشتر به دنبال کد هر کدام از آنها می روید که می توانید آموزش مختصری را در این لینک یاد بگیرید. برای مثال به نمونه زیر برای رنگ سیاه توجه کنید:
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 ها)
background-repeat: repeat;
}
background-position
شما در این قسمت می توانید پس زمینه خود را در وسط باکس ، راست باکس و چپ باکس قرار دهید. برای مثال تصویر پس زمینه شما در اندازه های 200*200 در باکسی با اندازه های 500*500 قرار دارد. شما با قرار دادن background-position در حالت center (وسط) پس زمینه شما در وسط باکس قرار می گیرد.
background-position می تواند تصویر پس زمینه را هم به صورت عمودی و هم به صورت افقی در سه حالت وسط ، راست و چپ قرار دهد.
background-position در حالت عمودی می تواند دارای گزینه های زیر باشد:
- top : در بالای باکس (پیشفرض)
- center : دروسط باکس (به صورت عمودی)
- bottom : در پایین باکس
background-position در حالت افقی می تواند مقادیر زیر را داشته باشد:
- right : پس زمینه را در سمت راست قرار می دهد.
- center : پس زمینه را در وسط قرار می دهد.
- left : پس زمینه را در سمت چپ قرار می دهد.
background-position: repeat;
}
background-attachment
این گزینه به شما کمک می کند که تصویر پس زمینه شما را در صورتی که از صفحه بیرون برود (نتوان تمام باکس را به صور کامل یکجا دید) به حالت fixed در آورد که یعنی تصویردر صفحه متحرک باشد و همیشه در صفحه به نمایش در آید.
background-attachment می تواند یکی از گزینه های زیر را داشته باشد:
- scroll : بدون ثابت ماندن در صفحه (پیشفرض)
- fixed : ثابت ماندن در صفحه
background-attachment: fixed;
}
توجه داشته باشید که در صورتی که شما یک تصویر را به عنوان پس
زمینه قرار داده اید و مقداری از تصویر پس زمینه شما بدون رنگ باشد و با در
واقع قسمتی از تصویر شما به رنگ پس زمینه ای که در آن قرار دارد در می آید باشد
برای دادن رنگ خاصی به آن باید کد رنگ را بعد از قسمت url
یا background-image قرار دهید. زیرا که آن یکی که در
background جلو تر نوشته شده است روی آن یکی که عقب تر
(دیر تر) نوشته شده است قرار می گیرد. |
منبع این آموزش فقط و فقط سایت کدستان می باشد و کپی برداری از آن غیر مجاز است.