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 - کلمه کلیدی Let (Let)

JavaScript – کلمه کلیدی Let (Let)

تعریف let کلیدواژه let در ES6 (2015) معرفی شد و دارای ویژگی‌های خاصی است که آن را از var...

بیشتر بخوانید
JavaScript - متغیرها (Variables)

JavaScript – متغیرها (Variables)

متغیرها در جاوا اسکریپت متغیرها در جاوا اسکریپت به عنوان ظرف‌هایی برای ذخیره‌سازی داده‌ها استفاده می‌شوند و می‌توانند به...

بیشتر بخوانید
JavaScript - کامنت‌ها (Comments)

JavaScript – کامنت‌ها (Comments)

کامنت‌ها در جاوا اسکریپت کامنت‌ها در جاوا اسکریپت به برنامه‌نویسان این امکان را می‌دهند تا توضیحاتی را به کد...

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

نظرات

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

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