Cała oryginalna treść jest tworzona po ukraińsku. Nie wszystkie treści zostały jeszcze przetłumaczone. Niektóre posty mogą być dostępne tylko po ukraińsku.Dowiedz się więcej

Jak używać kolorów szesnastkowych CSS z wartością alfa?

Ta treść została automatycznie przetłumaczona z ukraińskiego.
W CSS istnieje kilka sposobów zapisu kolorów, które można używać. Do najpopularniejszych należą RGB (czerwony, zielony, niebieski), RGBA (czerwony, zielony, niebieski, kanał alfa), HSL (odcień, nasycenie, jasność). Najpopularniejszy jest szesnastkowy (HEX) kod.
CSS obsługuje nazwane kolory. Większość nowoczesnych przeglądarek może je odczytać i zinterpretować. Takich kolorów jest obecnie 147. Wszystkie są zapisywane w języku angielskim (red, yellow, yellowgreen itd.)
CSS zapis wygląda następująco:

div {
	
  color: blue;

}
Szesnastkowy system liczbowy składa się z cyfr 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 oraz liter A, B, C, D, E, F. Dzięki HEX (szesnastkowy) można zapisać w CSS praktycznie każdy kolor.
Użycie koloru HEX w CSS
Kod HEX koloru jest używany w CSS jako wartość dla właściwości (np. color, background-color itd.)
 
Konstrukcja wygląda następująco:
 
obiekt, otwierający nawias klamrowy ({)
nazwa właściwości, dwukropek (:), wartość, średnik (;)
zamykający nawias klamrowy (})
 
 div {
   color: #HEX-kod;
 }
 
 Przed kodem HEX musi stać znak krzyżyka (#). Po nim należy zapisać wartość HEX potrzebnego koloru w formacie #RRGGBB.
 
 Pary RR - odpowiadają za czerwony (Red), GG - zielony (Green) oraz BB - niebieski (Blue).
 
 Można również używać skróconej wersji zapisu dla niektórych kolorów - #RGB
Używamy szesnastkowego koloru z kanałem alfa
Kod HEX z kanałem alfa (Alpha) zapisuje się jako HEXA.
Kod HEX ALPHA zapisuje się w CSS jako #RRGGBBAA, gdzie AA - to wartość kanału alfa. AA - to również szesnastkowa wartość, ale ten szesnastkowy kod dotyczy przezroczystości koloru.
Stuprocentowy poziom przezroczystości ma wartość FF. Oznacza to, że każdy kolor z stuprocentową wartością przezroczystości w kanale alfa - to całkowicie przezroczysty szesnastkowy kod (kolor).
Na przykład #F2F2F2FF
Kod szesnastkowy przezroczystości - to nie do końca poprawna nazwa. Bardziej poprawna - poziom przezroczystości szesnastkowego kodu koloru, lub kanał alfa kodu HEX.
Szesnastkowe kody przezroczystości kanału alfa dla koloru HEX:
100% — FF - pełna przezroczystość.
99% — FC
98% — FA
97% — F7
96% — F5
95% — F2
94% — F0
93% — ED
92% — EB
91% — E8
90% — E6
89% — E3
88% — E0
87% — DE
86% — DB
85% — D9
84% — D6
83% — D4
82% — D1
81% — CF
80% — CC
79% — C9
78% — C7
77% — C4
76% — C2
75% — BF
74% — BD
73% — BA
72% — B8
71% — B5
70% — B3
69% — B0
68% — AD
67% — AB
66% — A8
65% — A6
64% — A3
63% — A1
62% — 9E
61% — 9C
60% — 99
59% — 96
58% — 94
57% — 91
56% — 8F
55% — 8C
54% — 8A
53% — 87
52% — 85
51% — 82
50% — 80 - półprzezroczysty
49% — 7D
48% — 7A
47% — 78
46% — 75
45% — 73
44% — 70
43% — 6E
42% — 6B
41% — 69
40% — 66
39% — 63
38% — 61
37% — 5E
36% — 5C
35% — 59
34% — 57
33% — 54
32% — 52
31% — 4F
30% — 4D
29% — 4A
28% — 47
27% — 45
26% — 42
25% — 40
24% — 3D
23% — 3B
22% — 38
21% — 36
20% — 33
19% — 30
18% — 2E
17% — 2B
16% — 29
15% — 26
14% — 24
13% — 21
12% — 1F
11% — 1C
10% — 1A
9% — 17
8% — 14
7% — 12
6% — 0F
5% — 0D
4% — 0A
3% — 08
2% — 05
1% — 03
0% — 00 - całkowita nieprzezroczystość
Poziom kanału alfa w zakresie od 0 do 100 procent. Całkowicie nieprzezroczysty szesnastkowy kolor będzie miał 00 na końcu formatu HEXA #RRGGBBAA.
Na przykład #F2F2F200
Półprzezroczystość - to kanał alfa, który będzie miał poziom przezroczystości 50% (80). Oznacza to, że półprzezroczysty kolor w CSS będzie miał 80 na końcu formatu HEXA #RRGGBBAA.
Na przykład #F2F2F280
Półprzezroczysty kolor tekstu w CSS:
p {
  color: #F2F2F280;
}
Półprzezroczysty kolor tła w CSS:
div {
  background-color: #F2F2F280;
}

Ten post nie ma jeszcze żadnych dodatków od autora.

3 maj '23 17:46

Co zrobić, jeśli w macOS nie działa kamera internetowa?

3 maj '23 18:48

Jak uzyskać losową wartość logiczną true lub false w Ruby?

6 maj '23 09:19

Jak wyłączyć przesyłanie plików w edytorze Trix?

16 maj '23 20:02

Co to jest Origin w Git?

16 maj '23 22:17

Jak usunąć odstęp między elementami inline a inline-block?

17 maj '23 18:52

Co to jest loop w Javascript? Jak działają pętle for i while w Javascript?

22 maj '23 16:26

Jaka jest różnica między <%, <%=, <%# a -%> w szablonach ERB (Ruby on Rails)?

23 maj '23 06:57

Czym jest debugowanie (debugging)?

23 maj '23 07:41

Co to jest attr_accessor, attr_reader i attr_writer w Ruby? Do czego są potrzebne?