پس‌زمینه (Background) یکی از عناصر کلیدی در طراحی بصری وب است که می‌تواند به شدت بر ظاهر، حس و خوانایی کلی یک صفحه تأثیر بگذارد. CSS امکانات قدرتمندی برای طراحی پس‌زمینه‌ها، از رنگ‌های ساده گرفته تا تصاویر و گرادینت‌های پیچیده، فراهم می‌کند.

۱. ویژگی‌های اساسی پس‌زمینه (Background Properties)

CSS چندین ویژگی را برای کنترل ظاهر پس‌زمینه یک عنصر ارائه می‌دهد:

  • background-color: ساده‌ترین راه برای تعیین رنگ پس‌زمینه یک عنصر. همانند هر خاصیت رنگ دیگری، می‌توان از مقادیر Hex، RGB، RGBA، یا نام رنگ‌ها استفاده کرد.
  • background-image: برای قرار دادن یک تصویر به عنوان پس‌زمینه. این تصویر می‌تواند از یک URL مشخص شود.
  • مثال: background-image: url('images/background.jpg');
  • background-repeat: نحوه تکرار تصویر پس‌زمینه در صورت کوچک بودن اندازه آن نسبت به عنصر. مقادیر رایج عبارتند از:
  • repeat (پیش‌فرض): تصویر هم در جهت افقی و هم عمودی تکرار می‌شود.
  • repeat-x: تصویر فقط در جهت افقی تکرار می‌شود.
  • repeat-y: تصویر فقط در جهت عمودی تکرار می‌شود.
  • no-repeat: تصویر اصلاً تکرار نمی‌شود.
  • background-position: موقعیت اولیه تصویر پس‌زمینه در عنصر. می‌توان از مقادیر کلیدی مانند top, bottom, left, right, center یا مقادیر عددی (مانند 50px 20px) استفاده کرد.
  • background-size: اندازه تصویر پس‌زمینه را تعیین می‌کند. مقادیر رایج:
  • auto (پیش‌فرض): اندازه اصلی تصویر.
  • cover: تصویر را به گونه‌ای مقیاس‌بندی می‌کند که کل ناحیه پس‌زمینه را بپوشاند، حتی اگر بخشی از تصویر بریده شود.
  • contain: تصویر را به گونه‌ای مقیاس‌بندی می‌کند که کل آن در عنصر قابل مشاهده باشد، حتی اگر فضای خالی در اطراف آن باقی بماند.
  • مقادیر عددی (مانند 100px 50px یا 100% 50%).
  • background-attachment: تعیین می‌کند که آیا تصویر پس‌زمینه با اسکرول کردن صفحه حرکت می‌کند یا ثابت می‌ماند.
  • scroll (پیش‌فرض): تصویر با صفحه اسکرول می‌شود.
  • fixed: تصویر ثابت می‌ماند و صفحه از روی آن اسکرول می‌شود (ایجاد افکت پارالاکس).
  • local: تصویر با محتوای داخلی عنصر اسکرول می‌شود (اگر عنصر دارای اسکرول‌بار باشد).
  • background-blend-mode: نحوه ترکیب تصویر پس‌زمینه یا گرادینت با رنگ پس‌زمینه عنصر را مشخص می‌کند.
  • background-clip: مشخص می‌کند که پس‌زمینه تا کجا گسترش یابد (مثلاً تا لبه داخلی قاب، تا لبه پدینگ، یا تا لبه محتوا).
  • background-origin: مشخص می‌کند که موقعیت تصویر پس‌زمینه نسبت به کدام نقطه محاسبه شود (نسبت به border-box, padding-box, یا content-box).

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

۲. گرادینت‌ها (Gradients)

گرادینت‌ها اجازه می‌دهند تا یک انتقال رنگی نرم بین دو یا چند رنگ ایجاد کنید. این‌ها به عنوان تصاویر پس‌زمینه در CSS تعریف می‌شوند. دو نوع اصلی گرادینت وجود دارد:

الف) گرادینت‌های خطی (Linear Gradients)

  • مفهوم: رنگ‌ها در یک خط مستقیم، از یک نقطه شروع به یک نقطه پایان، تغییر می‌کنند. جهت خط گرادینت را می‌توان مشخص کرد.
  • ساختار: linear-gradient(direction, color-stop1, color-stop2, ...)
  • direction: جهت گرادینت را مشخص می‌کند. می‌تواند با کلماتی مانند to right, to bottom, to top left یا با زاویه (مثلاً 45deg, 180deg) تعیین شود. to bottom جهت پیش‌فرض است.
  • color-stop: هر رنگی که در گرادینت استفاده می‌شود. همچنین می‌توان با افزودن یک مقدار درصد (مثلاً red 0%, blue 100%)، محل دقیق شروع و پایان هر رنگ را مشخص کرد.
  • مثال:
  • linear-gradient(to right, red, yellow): گرادینتی از قرمز در سمت چپ به زرد در سمت راست.
  • linear-gradient(45deg, blue, purple): گرادینتی از آبی در گوشه پایین چپ به بنفش در گوشه بالا راست.
  • linear-gradient(red 0%, orange 50%, yellow 100%): گرادینتی سه‌رنگ.

ب) گرادینت‌های شعاعی (Radial Gradients)

  • مفهوم: رنگ‌ها از یک نقطه مرکزی شروع شده و به صورت دایره‌ای یا بیضوی به سمت بیرون پخش می‌شوند.
  • ساختار: radial-gradient(shape size at position, start-color, ..., last-color)
  • shape: شکل گرادینت (circle یا ellipse). ellipse حالت پیش‌فرض است.
  • size: اندازه گرادینت. می‌تواند با کلماتی مانند closest-corner, farthest-corner (پیش‌فرض), closest-side, farthest-side یا مقادیر مشخص تعیین شود.
  • position: موقعیت مرکز گرادینت (مشابه background-position).
  • start-color, ...: رنگ‌های مورد استفاده در گرادینت.
  • مثال:
  • radial-gradient(circle, yellow, red): گرادینتی دایره‌ای از زرد در مرکز به قرمز در لبه‌ها.
  • radial-gradient(ellipse at center, red, yellow): گرادینت بیضوی با مرکزیت صفحه، از قرمز به زرد.

ترکیب تصاویر و گرادینت‌ها

می‌توانید چندین تصویر پس‌زمینه و گرادینت را با هم ترکیب کنید. CSS این‌ها را از بالا به پایین (آخرین مورد در لیست، بالاترین لایه) پردازش می‌کند. این امکان، ایجاد افکت‌های بصری بسیار پیچیده و جذاب را فراهم می‌آورد.

کاربرد هوشمندانه پس‌زمینه‌ها و گرادینت‌ها می‌تواند به وب‌سایت شما عمق، جذابیت بصری و حس حرفه‌ای بودن ببخشد.

کلیدواژه ها : پس‌زمینه CSS-تصویر پس‌زمینه-گرادینت CSS-گرادینت خطی-گرادینت شعاعی-CSS Backgrounds-Background Image-CSS Gradients-Linear Gradient-Radial Gradient-