CSS Fonlar(background-color)

CSS Fonlar

CSS fon xususiyatlari elementlar uchun fon effektlarini qo'shish uchun ishlatiladi.

Ushbu boblarda siz quyidagi CSS fon xususiyatlari haqida bilib olasiz:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background (qisqartirilgan xususiyat)

CSS background-color

background-color xususiyati elementning fon rangini belgilaydi.

Misol Sahifaning fon rangini quyidagicha o'rnatish mumkin:

body {
  background-color: lightblue;
}

CSS bilan rang quyidagicha ko'pincha belgilanadi:

• Yaroqli rang nomi - masalan, "red"
• HEX qiymati - masalan, "#ff0000"
• RGB qiymati - masalan, "rgb(255,0,0)"

Mumkin bo'lgan rang qiymatlari ro'yxatini to'liq ko'rish uchun CSS Rang Qiymatlarini ko'rib chiqing.

Boshqa Elementlar

Siz har qanday HTML elementlari uchun fon rangini o'rnatishingiz mumkin:

Misol Bu yerda <h1>, <p> va <div> elementlari turli fon ranglariga ega bo'ladi:

h1 {
  background-color: green;
}
 
div {
  background-color: lightblue;
}
 
p {
  background-color: yellow;
}

Opaqlik / Shaffoflik

opacity xususiyati elementning opaqligi/shaffofligini belgilaydi. U 0.0 dan 1.0 gacha qiymat olishi mumkin. Qiymat qancha past bo'lsa, shuncha shaffoflik oshadi:

Misol

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

Eslatma: Elementning foniga shaffoflik qo'shish uchun opacity xususiyatidan foydalanganda, uning barcha farzand elementlari ham shunday shaffoflikni meros qilib oladi. Bu esa to'liq shaffof element ichidagi matnni o'qishni qiyinlashtirishi mumkin.

RGBA yordamida Shaffoflik

Agar siz farzand elementlarga opaqlikni qo'llashni xohlamasangiz, yuqoridagi misolimizda bo'lgani kabi, RGBA rang qiymatlaridan foydalaning. Quyidagi misol fon rangining opaqligini o'rnatadi, lekin matn emas:

Siz bizning CSS Ranglar bobimizdan RGB rang qiymatidan foydalanishingiz mumkinligini bilib oldingiz. RGBga qo'shimcha ravishda, siz rang uchun opaqlikni belgilovchi alfa kanali bilan (RGBA) RGB rang qiymatidan foydalanishingiz mumkin.

RGBA rang qiymati quyidagicha belgilanadi: rgba(qizil, yashil, ko'k, alfa). Alfa parametri 0.0 (to'liq shaffof) va 1.0 (to'liq to'q) orasidagi raqamdir.

Maslahat: Siz RGBA Ranglari haqida batafsilroq ma'lumotni bizning CSS Ranglar bobimizda o'rganasiz.

Misol

div {
  background: rgba(0, 128, 0, 0.3); /* 30% shaffoflik bilan yashil fon */
}

CSS background-color Xususiyati