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

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

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

در این فصل‌ها، با ویژگی‌های زیر در CSS آشنا خواهید شد:

background-color (رنگ پس‌زمینه)
background-image (تصویر پس‌زمینه)
background-repeat (تکرار تصویر پس‌زمینه)
background-attachment (نحوه اتصال تصویر پس‌زمینه)
background-position (موقعیت تصویر پس‌زمینه)
background (ویژگی خلاصه‌شده برای تنظیم چند ویژگی پس‌زمینه به‌صورت هم‌زمان)

ویژگی `background-color` در CSS

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

مثال

در مثال زیر، رنگ پس‌زمینه صفحه با استفاده از عنصر <body> تنظیم شده است:

body {
  background-color: lightblue;
}



در CSS، رنگ‌ها معمولاً به یکی از روش‌های زیر تعریف می‌شوند:

نام معتبر رنگ، مانند "red" (قرمز)
مقدار هگزادسیمال (HEX)، مانند "#ff0000"
مقدار RGB، مانند "rgb(255,0,0)"

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

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

شما می‌توانید رنگ پس‌زمینه را برای هر عنصر HTML تنظیم کنید.

مثال

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

h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}


شفافیت / میزان تیرگی

ویژگی opacity میزان شفافیت یک عنصر را مشخص می‌کند. مقدار این ویژگی عددی بین 0.0 تا 1.0 است. هرچه مقدار کمتر باشد، عنصر شفاف‌تر خواهد بود:

opacity: 1 → کاملاً مات
opacity: 0.6 → ۶۰٪ مات
opacity: 0.3 → ۳۰٪ مات
opacity: 0.1 → بسیار شفاف

مثال

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


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

شفافیت با استفاده از RGBA

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

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

۱۰۰٪ مات → rgba(..., 1)
۶۰٪ مات → rgba(..., 0.6)
۳۰٪ مات → rgba(..., 0.3)
۱۰٪ مات → rgba(..., 0.1)

در فصل مربوط به رنگ‌ها در CSS یاد گرفتید که می‌توان از RGB برای تعیین رنگ استفاده کرد. علاوه بر آن، می‌توان از RGBA استفاده کرد که شامل یک کانال آلفا برای تعیین میزان شفافیت رنگ است.

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

rgba(red, green, blue, alpha)

پارامتر alpha عددی بین 0.0 (کاملاً شفاف) تا 1.0 (کاملاً مات) است.

💡 نکته: در فصل رنگ‌ها در CSS، اطلاعات بیشتری درباره رنگ‌های RGBA خواهید آموخت.

مثال

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

جدول ویژگی `background-color` در CSS

ویژگی	توضیح
`background-color`	رنگ پس‌زمینه یک عنصر را تنظیم می‌کند