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

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

Xususiyat
Ta'rif

Elementning orqafon rangini o'rnatadi

Last updated