CSS – رنگ پس‌زمینه (Background Color)

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

  • background-color (رنگ پس‌زمینه)
  • background-image (تصویر پس‌زمینه)
  • background-repeat (تکرار پس‌زمینه)
  • background-attachment (پیوست پس‌زمینه)
  • background-position (موقعیت پس‌زمینه)
  • background (شورت‌هند پس‌زمینه)

CSS - رنگ پس‌زمینه (Background Color)

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

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

body {
  background-color: lightblue;
}

رنگ‌ها در CSS به چند روش مختلف تعریف می‌شوند:

  • با استفاده از یک نام رنگ معتبر مثل “red”
  • با استفاده از مقدار HEX مانند “#ff0000”
  • با استفاده از مقدار RGB مثل “rgb(255,0,0)”

برای مشاهده لیست کامل مقادیر رنگ در CSS، به بخش “مقادیر رنگ CSS” مراجعه کنید.

سایر عناصر

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

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

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); /* پس‌زمینه سبز با 30% شفافیت */
}

خصوصیت رنگ پس‌زمینه در CSS

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

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - رویدادها (Events)

JavaScript – رویدادها (Events)

رویدادهای HTML رویدادها در HTML، “اتفاقاتی” هستند که برای عناصر HTML رخ می‌دهند. این اتفاقات می‌توانند ناشی از کار...

بیشتر بخوانید
JavaScript - سازنده‌های شیء (Object Constructors)

JavaScript – سازنده‌های شیء (Object Constructors)

ساخت آبجکت با تابع سازنده (Object Constructor Function) برای ساخت چندین آبجکت مشابه، از تابع سازنده استفاده می‌شود. این...

بیشتر بخوانید
JavaScript - نمایش شیء (Object Display)

JavaScript – نمایش شیء (Object Display)

نحوه نمایش آبجکت‌ها در جاوااسکریپت هنگام نمایش یک آبجکت جاوااسکریپت به صورت مستقیم، خروجی معمولاً به شکل [object Object]...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.