آموزش رنگ پس زمینه در CSS

از ویژگی های background در CSS، برای اضافه کردن افکت های پس زمینه برای عناصر استفاده می شود. در این سری مقالات، نکاتی در زمینه ی ویژگی های پس زمینه(background properties) در CSS خواهید آموخت؛ یعنی موارد زیر:

background-color
background-image
background-repeat
background-attachment
background-position
background (ویژگی مختصر)

استفاده از ویژگی background-color در CSS

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

body {
  background-color: lightblue;
}

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

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

برای مشاهده ی یک لیست کامل از مقادیر رنگ های امکان پذیر، اینجا کلیک کنید.

تنظیم رنگ پس زمینه برای دیگر عناصر

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

h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}

شفافیت در سی اس اس (Opacity / Transparency)

ویژگی opacity، شفافیت یک عنصر را مشخص می کند. این ویژگی، یک مقدار بین 0 تا 1 است. مقدار 0 بیانگر کمترین شفافیت و مقدار 1 بیانگر بیشترین شفافیت است.

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

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

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

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

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

یک رنگ RGBA به صورت زیر مشخص می شود:

rgba(red, green, blue, alpha)

پارامتر آلفا(alpha) یک عدد بین 0 (کاملاً شفاف) و 1 (کاملاً غیر شفاف) می باشد.

نکته: برای اطلاعات بیشتر در مورد رنگ های RGBA می توانید به این مقاله و مقالات پس از آن مراجعه کنید.

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

ویژگی رنگ پس زمینه در CSS