نام:محمد امین
نام خانوادگی:عسکری
مدرک: مهندسی کامپیوتر-نرم افزار،MCSE،CCNA
مهارت و تخصص: برنامه نویسی،طراحی گرافیکی،طراحی صفحات وب ایستا و پویا،طراحی و راه اندازی وب سایت،راه اندازی و پشتیبانی تخصصی انواع شبکه
علاقه ی شدید من نسبت به علم کامپیوتر از دوران کودکی باعث شد تا با شور و علاقه وارد این حیطه ی گسترده شوم و روز به روز علاوه بر کسب دانش و مهارت نسبت به قبل بیشتر علاقه مند باشم،هم اکنون نیز علاوه بر فراگیری دوره های مختلف به فعالیت در زمینه ی شبکه و وب مشغولم و همچنین آماده ی همکاری با علاقه مندان در تمام زمینه های مرتبط با کامپیوتر و IT خواهم بود.
پس زمینه ها در CSS
در طراحی صفحات وب یکی از نکات حائز اهمیت انتخاب و قراردهی مناسب یک پس زمینه یا Background میباشد،در این مطلب به معرفی کد های پس زمینه و کاربرد هریک در فایل Css خواهم پرداخت.
رنگ پس زمینه
کد مربوط به رنگ پس زمینه در قسمت body قرار خواهد داشت:
مثال
|
رنگ پس زمینه میتواند شامل موارد زیر باشد:
- name – a color name, like “red”
- RGB – an RGB value, like “rgb(255,0,0)”
- Hex – a hex value, like “#ff0000″
مثال
|
تصویر پس زمینه
به صورت پیش فرض تصویر انتخابی شما آنقدر تکرا میشود تا محل مورد نظر را پوشش دهد.
تصویر پس زمینه ی یک صفحه میتواند مانند مثال زیر تنظیم شود:
مثال
|
مثال
|
تکرار و موقعیت پس زمینه
به صورت پیش فرض تصویر پس زمینه در هر دو حالت افقی و عمدی تکرار خواهد شد.
برخی تصاویر را باید فقط افقی یا عمودی تکرار کرد و در صورت رعایت نکردن این موضوع تصاویر گنگ و مبهمی خواهیم داشت،مانند مثال زیر:
مثال
|
اگر تصویر را فقط افقی تکرار کنیم(repeat-x) پس زمینه ی ما نمای بهتری خواهد داشت:
مثال
|
تصویر پس زمینه-تعیین موقعیت-بدون تکرار
نمایش یک تصویر پس زمینه بدون تکرار:
مثال
|
تعیین موقعیت قرار گیری تصویر پس زمینه بدون تکرار:
مثال
|
رنگ و تصویر پس زمینه
گاهی اوقات که شما از تصاویری با زمینه ی محو استفاده میکنید لازم است تا رنگ پس زمینه هم انتخاب شود،مانند مثال زیر:
مثال
|
تمام تنظیمات پس زمینه در CSS
| ویژگی | توضیحات | مقادیر | CSS |
|---|---|---|---|
| background | Sets all the background properties in one declaration | background-color background-image background-repeat background-attachment background-position inherit |
1 |
| background-attachment | Sets whether a background image is fixed or scrolls with the rest of the page | scroll fixed inherit |
1 |
| background-color | Sets the background color of an element | color-rgb color-hex color-name transparent inherit |
1 |
| background-image | Sets the background image for an element | url(URL) none inherit |
1 |
| background-position | Sets the starting position of a background image | left top left center left bottom right top right center right bottom center top center center center bottom x% y% xpos ypos inherit |
1 |
| background-repeat | Sets if/how a background image will be repeated | repeat repeat-x repeat-y no-repeat inherit |
1 |
Add your comment