ثبت نام کنید

ورود

فراموشی رمز عبور

رمز عبور خود را فراموش کرده اید؟ آدرس ایمیل خود را وارد کنید، یک ایمیل حاوی لینک بازیابی رمز عبور برای شما ارسال می شود.

پرسیدن سوال

برای پرسیدن سوال، ابتدا باید وارد حساب کاربری خود شوید.

آموزش css – قسمت پنجم(Backgrounds)

سلام

با پنجمین قسمت از آموزش Css در خدمتتون هستیم؛ در این قسمت خواهیم پرداخت به پس زمینه یا Background ها در css؛ در ادامه همراه بپرسم باشید.

آموزش:

Background(پس زمینه) یکی از خواص پرکابرد css می باشد که از این خاصیت برای تعریف افکت های پس زمینه ی عناصر HTML استفاده می کنیم، در واقع هنگامی که بخوایم برای پس زمینه صفحه یک تصویر یا بخوایم رنگی را برای یکی از عناصر در نظر بگیریم از این خاصیت استفاده میکنیم.

حال خاصیت Background دارای دارای ۵ ویژگی است، که این ۵ ویژگی عبارتند از:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

که در ادامه به توضیح هر ویژگی می پردازیم.

  • background-color

از Background-color برای تغییر رنگ پس زمینه استفاده می شود.

مثال: رنگ پس زمینه یک صفحه HTML

کد بالا را برای تگ body خود در قسمت کدهای css قرار دهید و نتیجه را مشاهده کنید.

برای رنگ دهی به عناصر HTML توسط Css از شیوه های زیر می توانیم استفاده کنیم:

  1. به کار بردن نام رنگ، مثل blue
  2. نوشتن مقدار هگزادسیمال(HEX)، مثل ff0000
  3. نوشتن مقدار RGB، مثل RGB(255,0,0)

که در جلسه قبلی انواع شیوه های رنگ دهی را توضیح دادیم، برای مشاهده آموزش رنگ ها در Css کلیک کنید.

از ویژگی background-color می توانیم برای دیگر عناصر HTML نظیر تگ های p,h1 to h6,div و … استفاده کنیم.

برای هر عنصری که خواستید رنگ اعمال شود، کافیست برای تگ مورد نظر در قسمت css از ویژگی background-color استفاده کنید.

  • background-image

از ویژگی background-image برای تعیین یک تصویر برای پس زمینه استفاده می کنیم.

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

مثال: گذاشتن یک تصویر برای پس زمینه

در کد بالا یه جای beporsam_back.png نام و آدرس تصویر خود را قرار دهید.

برای چگونگی آدرس دادن تصاویر، این آموزش را مطالعه نمایید.

حتما بخوانید:  آموزش نصب ویندوز از روی فلش

 

  • background-repeat

به طور پیشفرض تصویر به هر دو صورت عمودی(verticall) و افقی(horizontall) تکرار می شود.

برای تغییر تکرار تصویر به صورت Vertical یا Horizontall به صورت زیر می بایست از ویژگی background-repeat در کنار background-image به صورت زیر استفاده کنید.

برای تکرار تصویر به صورت افقی از  background-repeat: repeat-x و برای تکرار به صورت عمودی از background-repeat: repeat-y استفده کنید.

  • Background Image – Set position and no-repeat

در صورتی که بخواهیم تصویر زمینه تکرار نشود از background-repaet به صورت زیر استفاده می کنیم:

با استفاده از background-repaet تصویر زمینه یک بار فقط نمایش داده می شود و تکرار تصویر زمینه غیر فعال می شود.

با background-position می توانیم محل قرار گیری تصویر را مشخص کنیم، در مثال زیر محل قرار گیری تصویر را مشخص کردیم:

در مثال بالا گفتیم تصویر را در سمت راست و بالا قرار بگیرد(right top) می توانیم به right top از left top,center top و … استفاده کنیم.

  • Background Image – Fixed position

همچنین می توانیم تصویر زمینه را ثابت کنیم، منظور از ثابت کردن این است تصویر را ثابت می کنیم به طوری که هنگام اسکرول کردن صفحه به سمت پایین یا بالا، تصویر هم حرکت کند، برای این کار مقدار background-attachment را مساوری fixed قرار میدهیم.

برای درک بهتر ثابت بودن تصویر، کدهای زیر را در یک سند HTML ذخیره و نتجیه را مشاهده کنید.

در کد بالا به جای beporsam_back.png آدرس تصویر خود را جایگزین کنید.

  • تمامی خواص Background
حتما بخوانید:  آموزش کار با پایگاه داده در B4A - قسمت اول(ساخت پایگاه داده)

ویژگی

توضیح

background

کلیه خصوصیات مربوط به پس زمینه را در یک مرحله تنظیم می کند.

background-attachment

ثابت کردن تصویر هنگام اسکرول کردن صفحه

background-color

تنظیم رنگ پس زمینه

background-image

تنظیم تصویر پس زمینه

background-position

محل قرار گیری تصویر

background-repeat

چگونگی تکرار پس زمینه

 

آموزش این بخش نیز به پایان رسید، امیدوارم مفید بوده باشه:)

هرگونه سوالی یا مشکلی در رابطه با مطلب فوق داشتید؛ در سایت بپرسید، پاسخگوی سوالات شما هستیم، برای پرسیدن سوال کلیک کنید.

موفق باشید.


درباره SOLTANE GHALBHAمدیر

امیدوارم از سایت رضایت کافی را داشته باشید :)

دنبال کردن من

نظر شما چیست؟