پس‌زمینه CSS

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

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

  • رنگ پس‌زمینه
  • تصویر پس‌زمینه
  • تکرار پس‌زمینه
  • پیوستگی پس‌زمینه
  • محل پس‌زمینه

CSS رنگ پس‌زمینه

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

مثال

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

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 را با آلفا کانال‌ها با هم استفاده می‌شوند (RGBA) - این کانال شفافیت رنگ را مشخص می‌کند.

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

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

مثال

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

آزمایش کنید