Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

CSS ranglar

CSS 140 dan ortiq rang nomlari, RGB, HEX va HSL qiymatlarini qo‘llab-quvvatlaydi. Bundan tashqari, RGBA, HEXA, HSLA qiymatlari hamda shaffoflik (opacity) xossasi mavjud.

ULASHISH

RGBA ranglari

RGBA rang qiymatlari RGB ranglarining alfa kanal bilan kengaytmasi — alfa kanal rangning shaffofligini belgilaydi.

RGBA rang qiymati quyidagicha belgilanadi:

rgba(red, Yashil, blue, alpha)

Alfa parametri 0.0 (to‘liq shaffof) va 1.0 (to‘liq noshaffof) oralig‘idagi son.

rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);

Quyidagi misol turli RGBA ranglarini belgilaydi:

Misol

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* blue with opacity */
O‘zingiz sinab ko‘ring »

HEXA ranglari

HEXA rang qiymatlari HEX ranglarining alfa kanal bilan kengaytmasi — alfa kanal rangning shaffofligini belgilaydi.

HEXA rang qiymati quyidagicha belgilanadi:

#rrggbbaa

Alfa parametri — 00 (to‘liq shaffof) va FF (umuman shaffof emas) orasidagi qiymat. 80 qiymati 50% shaffoflikni bildiradi:

Misol

#ff000080
#0000ff80
#3cb37180
#ee82ee80
#ffa50080
#6a5acd80

O‘zingiz sinab ko‘ring »

Bu yerda ba’zi umumiy shaffoflik foizlari va ularning aniq 2 xonali HEX qiymatlari keltirilgan:

  • 100% - FF (umuman shaffof emas)
  • 90% - E6
  • 80% - CC
  • 70% - B3
  • 60% - 99
  • 50% - 80
  • 40% - 66
  • 30% - 4D
  • 20% - 33
  • 10% - 1A
  • 0% - 00 (to‘liq shaffof)

HSLA ranglari

HSLA rang qiymatlari HSL ranglarining alfa kanal bilan kengaytmasi — alfa kanal rangning shaffofligini belgilaydi.

HSLA rang qiymati quyidagicha belgilanadi:

hsla(hue, TO‘YINGANLIK, lightness, alpha)

Alfa parametri 0.0 (to‘liq shaffof) va 1.0 (to‘liq noshaffof) oralig‘idagi son:

hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);

Quyidagi misol turli HSLA ranglarini belgilaydi:

Misol

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* pastel green with opacity */
O‘zingiz sinab ko‘ring »

CSS opacity xossasi

opacity xossasi butun elementning shaffofligini belgilaydi (fon rangi ham, matn ham xira/shaffof bo‘ladi).

opacity xossasi qiymati 0.0 (to‘liq shaffof) va 1.0 (to‘liq xira) orasidagi son bo‘lishi kerak.

rgb(255, 0, 0);opacity:0.2;
rgb(255, 0, 0);opacity:0.4;
rgb(255, 0, 0);opacity:0.6;
rgb(255, 0, 0);opacity:0.8;

Element ichidagi matn ham shaffof/xira bo‘lishiga e’tibor bering!

Quyidagi misol turli opacity’li elementlarni ko‘rsatadi:

Misol

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* red with opacity */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* green with opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* blue with opacity */
O‘zingiz sinab ko‘ring »

‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish