پس‌زمینه CSS

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

در این فصل‌ها، شما درس‌های زیر را یاد خواهید گرفت:

  • رنگ پس‌زمینه
  • background-image
  • background-repeat
  • background-attachment
  • background-position

CSS background-color

رنگ پس‌زمینه ویژگی مشخص می‌کند که رنگ پس‌زمینه عنصر چگونه تعیین می‌شود.

مثال

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

body {
  رنگ پس‌زمینه: آبی روشن;
}

آزمایش کنید

از طریق CSS، رنگ‌ها معمولاً به یکی از روش‌های زیر مشخص می‌شوند:

  • نام رنگ‌های معتبر - به عنوان مثال "red"
  • مقدار هشتمی - به عنوان مثال "#ff0000"
  • مقدار RGB - به عنوان مثال "rgb(255,0,0)"

لطفاً بررسی کنید مقدارهای رنگ CSS، لیست کامل رنگ‌های ممکن را دریافت کنید.

عناصر دیگر

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

مثال

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

h1 {
  رنگ پس‌زمینه: سبز;
}
div {
  رنگ پس‌زمینه: آبی روشن;
}
p {
  رنگ پس‌زمینه: زرد;
}

آزمایش کنید

شفافیت / شفافیت

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

شفافیت 1
شفافیت 0.6
شفافیت 0.3
شفافیت 0.1

مثال

div {
  رنگ پس‌زمینه: سبز;
  شفافیت: 0.3;
}

آزمایش کنید

توجه داشته باشید:استفاده از شفافیت وقتی شفافیت برای پس‌زمینه عنصر تنظیم می‌شود، تمام فرزندان آن عنصر شفافیت مشابهی را به ارث می‌برند. این ممکن است خوانایی متن در عناصر کاملاً شفاف را دشوار کند.

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

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

100% شفافیت
60% شفافیت
30% شفافیت
10% شفافیت

از رنگ CSS در فصل یاد گرفتیم که می‌توان RGB را به عنوان مقدار رنگ استفاده کرد. علاوه بر RGB، می‌توان مقدارهای رنگ RGB را با alpha کانال‌ها با هم استفاده می‌شوند (RGBA) - این کانال شفافیت رنگ را مشخص می‌کند.

مقدارهای رنگ RGBA مشخص می‌شوند به صورت: rgba(red, green, blue, alpha)。alpha پارامترها عددی بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً غیرشفاف) هستند.

نکته:شما می‌توانید در رنگ CSS در این فصل بیشتر درباره رنگ‌های RGBA یاد می‌گیرید.

مثال

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

آزمایش کنید