CSS fonlar

CSS fonlari

CSS fon xossalari elementlarga fon effektlari qo‘shish uchun ishlatiladi.

Bu boblarda quyidagi CSS fon xossalari haqida bilib olasiz:

background-color
background-image
background-repeat
background-attachment
background-position
background (shorthand property)

CSS background-color xossasi

background-color xossasi element fon rangini belgilaydi.

Misol

Sahifa fon rangi mana bunday belgilanadi:

body {
background-color: lightblue;
}

O‘zingiz sinab ko‘ring »

CSS’da rang ko‘pincha quyidagicha belgilanadi:

yaroqli rang nomi - masalan, "red"
HEX qiymat - masalan, "#ff0000"
RGB qiymat - masalan, "rgb(255,0,0)"

Mumkin bo‘lgan barcha rang qiymatlari ro‘yxati uchun CSS rang qiymatlari sahifasiga qarang.

Boshqa elementlar

Har qanday HTML elementlari uchun fon rangini belgilash 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;
}

O‘zingiz sinab ko‘ring »

Xiralik / Shaffoflik (opacity)

opacity xossasi elementning shaffofligini belgilaydi. 0.0 - 1.0 orasida qiymat qabul qiladi. Qiymat qanchalik past bo‘lsa, shunchalik shaffof:

opacity 1

opacity 0.6

opacity 0.3

opacity 0.1

Misol

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

O‘zingiz sinab ko‘ring »

Eslatma: opacity xossasidan element foniga shaffoflik qo‘shish uchun foydalanganda, barcha bola elementlari bir xil shaffoflikni meros oladi. Bu to‘liq shaffof element ichidagi matnni o‘qishni qiyinlashtirishi mumkin.

RGBA yordamida shaffoflik

Yuqoridagi misolimizdagi kabi bola elementlarga shaffoflik qo‘llanishini istamasangiz, RGBA rang qiymatlaridan foydalaning. Quyidagi misol fon rangi uchun shaffoflik belgilaydi, matn uchun emas:

100% opacity

60% opacity

30% opacity

10% opacity

Bizning CSS Colors bobimizdan siz rang qiymati sifatida RGB ishlatish mumkinligini bilib oldingiz. RGB’dan tashqari, rang shaffofligini belgilaydigan alfa kanalli RGB rang qiymatidan (RGBA) ham foydalanishingiz mumkin.

RGBA rang qiymati mana bunday belgilanadi: rgba(red, green, blue, alpha). alfa parametri 0.0 (to‘liq shaffof) va 1.0 (to‘liq xira) orasidagi sondir.

Maslahat: Siz RGBA ranglari haqida CSS Colors bobimizda ko‘proq bilib olasiz.

Misol

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

O‘zingiz sinab ko‘ring »

CSS background-color xossasi

Xususiyat	Tavsif
background-color	Elementning fon rangini o‘rnatadi

Video: CSS fon rangi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish