Background color

CSS background xususiyatlari elementlarga orqafon effektini berish uchun ishlatiladi.

Ushbu bo'limda CSSning quyidagi background xususiyatlari haqida o'rganasiz:

background-color

background-color xususiyati elementning orqafoniga rang beradi.

Sahifaning orqafon rangi quyidagicha beriladi:

body {
  background-color: lightblue;
}

CSS-da rang ko'pincha quyidagilar bilan belgilanadi:

  • to'g'ri keladigan rang nomi - "qizil"ga o'xshagan.

  • HEX qiymati - #ff0000 kabi.

  • RGB qiymati - "rgb(255,0,0)".

Barcha rang nomlarini bilish uchun CSS rang qiymatlari sahifasiga qarang.

Boshqa elementlar

HTML dagi har qanday elementning background rangini o'zgartira olasiz:

Quyidagi <h1>, <div> va <p> elementlarining background ranglari xar xil qilib o'zgartirilgan:

h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}

Opacity / Shaffoflik

opacity xususiyati elementning shaffofligini belgilaydi. U 0.0 dan 1.0 gacha bo'lgan qiymatlarni qabul qiladi. Qiymat qancha past bo'lsa shaffoflik shuncha yuqori bo'ladi.

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

Eslatma: opacity xususiyati orqali elementni shaffof qilganda, element ichidagi barcha bola elementlar ham shaffoflikni meros qilib oladi. Bunda matnni to'liq shaffoq qilganda uning ichidagi matn ko'rinmay qoladi.

RGBA yordamida shaffoflik

Yuqorida ko'rgan misolimizdagidek, ichki elementlar shaffoflikni meros qilib olishini xohlamasangiz, RGBA rang qiymatlaridan foydalaning. Quyidagi misol matnni emas faqat background rangining shaffofligini o'zgartiradi:

Bizning CSS Ranglari bo'limimizdan RGB rang qiymatlaridan qanday foydalanish kerakligini o'rgandingiz. Qo'shimchasiga RGB dagi rangning shaffofligini belgilovchi alpha kanalga ega RGBA ni ham ko'rib chiqqansiz.

RGBA rangining qiymatlari: rgba(red, green, blue, alpha) lar bilan belgilanadi. Alpha parametriga 0.0 (to'liq shaffof) bo'lgan va 1.0 (to'liq rang) oralig'idagi raqamlar kiritladi.

Tip: RGBA ranglari haqida CSS ranglari bo'limimizdan ko'proq ma'lumot olishingiz mumkin.

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

CSSning background color xususiyati

PreviousCSS BackgroundlarNextBackground image

Last updated