خانه / آموزش CSS / بخش پنجم-خصوصیات CSS background
پشتیبان وب سایت وردپرس
CSS background"

تاریخ بروزرسانی: ۱۲ بهمن ۱۳۹۷ تعداد بازدید : 18 بازدید بدون دیدگاه

بخش پنجم-خصوصیات CSS background

قدم قبلی >< قدم بعدی
ویژگی‌های CSS background 
CSS background

 

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

خواص CSS background:

  • رنگ پس زمینه
  • تصویر پس زمینه
  • پس زمینه-تکرار
  • پس زمینه دلبستگی
  • موقعیت پس زمینه

رنگ پس زمینه (background-color

خصوصیات background-color رنگ پس زمینه یک عنصر را مشخص می کند.

مثال:

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

رنگ پس زمینه

 

در کد نویسی CSS، رنگها اغلب توسط روشهای زیر معین می شوند:

  • یک نام رنگ معتبر مانند “red”

  • یک مقدار HEX مانند “# ff0000”

  • یک مقدار RGB مانند “rgb (255،۰،۰)”

مثال:

در مثال زیر، عناصر <h1>، <p> و <div> دارای رنگ پس زمینه متفاوت هستند:

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

رنگ پس زمینه در خروجی

 

تصویر پس زمینه (Background Image)

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

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

تصویر پس زمینه برای یک صفحه می تواند مانند این باشد:

مثال:

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

 

 پس زمینه صفحه خروجی

 

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

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

 

 

پس زمینه صفحه خروجی

نکته: هنگام استفاده از یک تصویر پس زمینه، از یک تصویر استفاده کنید که متن را مختل نکند.

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

به طور پیش فرض، خصوصیت background image یک تصویر را به صورت افقی و عمودی تکرار می کند.

بعضی از تصاویر باید فقط به صورت افقی یا عمودی تکرار شوند، یا به نظر می رسد عجیب و غریب مانند این است:

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

 

پس زمینه صفحه خروجی

 

 

اگر تصویر بالا فقط به صورت افقی تکرار شود (background-repeat: repeat-x) پس زمینه بهتر خواهد شد:

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

 

پس زمینه صفحه خروجی

 

 

نکته: برای تکرار یک تصویر به صورت عمودی، پس زمینه را با کد  repeat-y تنظیم کنید.

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

در اینجا نمایش یک تصویر پس زمینه تنها برای یک بار نیز توسط ویژگی background-repeat مشخص شده است:

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

 

پس زمینه صفحه خروجی

 

 

در مثال بالا، تصویر پس زمینه در همان محل متن نمایش داده می شود. ما می خواهیم موقعیت تصویر را تغییر دهیم، به طوری که خیلی مزاحم دیده شدن متن نشود.

موقعیت تصویر در صفحه با ویژگی background-position مشخص می شود:

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

 

پس زمینه صفحه خروجی

 

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

برای تعیین اینکه تصویر پس زمینه باید ثابت باشد (با بقیه صفحه حرکت نمی کند)، از ویژگی background-attachment استفاده کنید.

پس زمینه- خصوصیت مختصرنویسی (Shorthand property)

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

خصوصیات کوتاه برای پس زمینه پس زمینه است:

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

 

 ویژگی shorthand 

 

زمانی که از ویژگی shorthand استفاده می‌کنید، ترتیب اولویت خصوصیتها عبارت است از:

    • رنگ پس زمینه
    • تصویر پس زمینه
    • پس زمینه-تکرار
    • پس زمینه دلبستگی
    • موقعیت پس زمینه

مهم نیست که یکی از مقادیر خصوصیت از دست رفته باشد، تا زمانی که بقیه به این ترتیب باشند.

 

گام قبلی >< گام بعدی
لطفا امتیاز بدهید

لینک کوتاه این مطلب: https://tiktheme.com/?p=15032


کانال تلگرام تیک تم

دیدگاهتان را بنویسید

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