سی‌اس‌اس/پس‌زمینه

رنگ

پس‌زمینه

گرادیان

پس‌زمینه‌ها در CSS

ویژگی‌های پس‌زمینه در CSS برای افزودن جلوه‌های بصری به پشت‌زمینهٔ عناصر HTML استفاده می‌شوند. در این مقاله، با مهم‌ترین ویژگی‌های مربوط به پس‌زمینه در CSS آشنا می‌شویم:

background-color
background-image
background-repeat
background-attachment
background-position
background (ویژگی مخفف یا shorthand)

background-color

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

مثال ساده

برای تعیین رنگ پس‌زمینهٔ صفحهٔ وب:

body {
  background-color: lightblue;
}

روش‌های تعیین رنگ در CSS

نام رنگ (مانند: "red")
مقدار هگزادسیمال (مانند: "#ff0000")
مقدار RGB (مانند: "rgb(255, 0, 0)")

برای آشنا شدن با سیستم رنگ‌ها، به فصل رنگ ها مراجعه کنید.

اعمال رنگ پس‌زمینه به سایر عناصر

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

h1 {
  background-color: green;
}
div {
  background-color: lightblue;
}
p {
  background-color: yellow;
}

شفافیت / opacity

ویژگی opacity شفافیت یک عنصر را کنترل می‌کند. مقدار آن بین 0.0 (کاملاً شفاف) تا 1.0 (کاملاً مات) است.

div {
  background-color: green;
  opacity: 0.3;
}

نکته: استفاده از opacity باعث می‌شود تمام محتوای داخل عنصر، از جمله متن و تصاویر، نیز شفاف شوند.

استفاده از RGBA برای شفاف‌سازی پس‌زمینه

برای شفاف کردن فقط رنگ پس‌زمینه (بدون تأثیر بر متن)، می‌توان از RGBA استفاده کرد:

div {
  background: rgba(0, 128, 0, 0.3); /* سبز با ۳۰٪ شفافیت */
}

فرمت نوشتاری مقدار RGBA به صورت زیر است:

rgba(قرمز, سبز, آبی, شفافیت)

مقدار شفافیت عددی بین 0.0 تا 1.0 است.

background-image

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

body {
  background-image: url("img_tree.png");
}

background-repeat

به‌طور پیش‌فرض، تصاویر پس‌زمینه هم در جهت افقی و هم عمودی تکرار می‌شوند.

فقط تکرار افقی:

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

فقط تکرار عمودی:

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-y;
}

بدون تکرار:

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
}

background-position

ویژگی background-position موقعیت تصویر پس‌زمینه را تعیین می‌کند.

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

مقدارهای معمول شامل: left, center, right برای افقی و top, center, bottom برای عمودی هستند.

background-attachment

این ویژگی مشخص می‌کند که تصویر پس‌زمینه نسبت به اسکرول صفحه چگونه رفتار کند.

تصویر ثابت (اسکرول نمی‌شود):

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

تصویر همراه با اسکرول حرکت کند:

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
}

ویژگی مخفف background

برای کاهش کد، می‌توان تمام ویژگی‌های پس‌زمینه را به صورت یکجا در قالب یک ویژگی background نوشت.

شکل کامل:

body {
  background-color: #ffffff;
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

به‌صورت shorthand:

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

ترتیب مقادیر در ویژگی مخفف به‌صورت زیر است:

background-color → background-image → background-repeat → background-attachment → background-position

وجود برخی مقادیر اجباری نیست، اما ترتیب اهمیت دارد.

منابع

سی‌اس‌اس/رنگ