افزودن پس زمینه در css

سری مقالات آموزش CSS – پس زمینه ها – CSS background – افزودن پس زمینه در css

پس زمینه های CSS

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

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

  • رنگ پس زمینه
  • تصویر پس زمینه
  • پس زمینه تکرار
  • پیوست پس زمینه
  • موقعیت پس زمینه
  • پیش زمینه (ویژگی مختصر)

رنگ پس زمینه CSS

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

مثال

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

body {
  background-color: lightblue;
}

با CSS ، یک رنگ اغلب توسط:

  • یک نام رنگ معتبر – مانند “قرمز”
  • یک مقدار HEX – مانند “# ff0000”
  • مقدار RGB – مانند “rgb (255،0،0)”

برای مشاهده لیست کاملی از مقادیر ممکن رنگ ، به مقادیر CSS Color نگاه کنید.

عناصر دیگر

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

مثال

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

h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}

کدورت / شفافیت

ویژگی opacity میزان کدورت / شفافیت یک عنصر را مشخص می کند. این می تواند یک مقدار از 0.0 – 1.0 را بگیرد. مقدار پایین تر ، شفاف تر:

افزودن پس زمینه در css

مثال

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

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

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

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

افزودن پس زمینه در css

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

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

نکته: درباره RGBA Colors در فصل CSS Colors ما اطلاعات بیشتری کسب خواهید کرد.

مثال

div {
  background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *