جلسه ششم-پس زمینه

از  background برای تعریف افکت های پس زمینه استفاده می شود.

ویژگی های background:

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

background color :

برای تعیین رنگ پس زمینه عناصر موردنظر از این ویژگی استفاده نمایید.

مثال:

 اجرای مثال

رنگ ها  در css اغلب مشخص می شوند توسط:

۱-نام رنگ مانند: “red”

۲-مقدار هگزادسیمال مانند : #ff0000

۳-مقدار RGB مانند: rgb(255,0,0)

در مثال زیر المان های <h1>و<p>, و  <div>دارای رنگ پس زمینه متفاوت از هم هستند.

 اجرای مثال

 

Background Image

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

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

اجرای مثال

در زیر یک مثال از یک ترکیب بدی از متن و تصویر پس زمینه است. متن به سختی قابل خواندن است:

 اجرای مثال

نکته:هنگام استفاده از عکس پس زمینه از عکس هایی استفاده نمایید که متن در آن به خوبی نمایش داده شود.

تکرار عکس افقی و عمودی در عکس پس زمینه:

به طور پیش فرض ویژگی تصویر پس زمینه عکس را به صورت افقی و عمودی تکرار می نماید برخی تصاویر باید به صورت افقی یا عمودی تکرار شوند

یا آنها عجیب و غریب می شوند، مانند مثال زیر:

 اجرای مثال

اگر در تصویر بالا عکس به صورت افقی تکرار شود تصویر پس زمینه بهتر خواهد شد:

 اجرای مثال

 

نکته:جهت تکرار عکس به صورت عمودی کافیست به صورت زیر عمل نمایید:

background-repeat: repeat-y;

تصویر پس زمینه تعیین موقعیت و بدون تکرار:

نمایش تصویر پس زمینه تنها یک بار  توسط ویژگی تکرار پس زمینه مشخص شده است.

 اجرای مثال

در مثال بالا عکس در همان مکانی است که متن قرار دارد میخواهیم مکان نمایش عکس را تغییر دهیم که عکس خواندن نوشته را سخت نکند.مکان قرار گیری عکس با ویژگی background-position تعیین می شود

 اجرای مثال

تصویر پس زمینه – موقعیت ثابت:

با استفاده از ویژگی background-attachment می توان مشخص نمود که تصویر پس زمینه ثابت باشد

 اجرای مثال

پس زمینه – ویژگی مختصر نویسی:

برای کوتاه کردن کد می توان تمامی ویژگی های پس زمینه را در یک ویژگی مشخص نمود که به آن مختصر نویسی می گویند.

 اجرای مثال




پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code