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.

CSS

Sahifaning orqafon rangi quyidagicha beriladi:

body {
  background-color: lightblue;
}

W3Schools online HTML editor

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:

CSS

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;
}

W3Schools online HTML editor

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.

CSS

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

W3Schools online HTML editor

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.

CSS

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

W3Schools online HTML editor

CSSning background color xususiyati

Xususiyat	Ta'rif
background-color	Elementning orqafon rangini o'rnatadi