Uwaga: Poniższy artykuł pomoże Ci w: Przewodnik po kolorach CSS RGBA
RGBA to rodzaj wartości koloru CSS, który pozwala nam ustawić kolor, a także jego krycie/przezroczystość. Oto przykład użycia notacji CSS rgba() do określenia .
p {kolor: rgba(255, 255, 255, 0.5); }
RGBA jest rozszerzeniem modelu kolorów RGB.
Akronim oznacza . Wartość alfa reprezentuje poziom przezroczystości/nieprzezroczystości koloru.
Składnia RGBA
Format zapisu kolorów RGBA to:
rgba(, , , )
Pierwsze trzy wartości — , , — mogą być liczbami całkowitymi pomiędzy 0 i 255 lub procenty pomiędzy 0% i 100%. Te wartości opisują ilość czerwieni, zieleni i błękitu w żądanym kolorze.
Na przykład, jeśli chcesz kolor tła, chciałbyś 100% czerwieni, 0% zielony i 0% niebieskiego, który można ustawić w następujący sposób:
kolor tła: rgba(255, 0, 0, 1);
Wynik:
Lub używając wartości procentowych:
kolor tła: rgba(100%, 0%, 0%, 1);
Wynik:
Czwarta wartość, , określa poziom przezroczystości/nieprzezroczystości koloru i może być wartością pomiędzy 0.0 I 1.0. (Nawiasem mówiąc, jeśli się zastanawiasz, w wersji roboczej modułu CSS Color Module opracowanej przez edytora CSS4 istnieje specyfikacja zezwalająca na użycie wartości procentowych dla wartości alfa RGBA, ale obecnie przeglądarki nie obsługują tej opcji jeszcze.) Oto jak określić:
kolor: rgba(255, 242, 0, 0.5);
Wynik:
Żółty
Konwersja liczb całkowitych na procenty
Jak wspomniano wcześniej, użycie wartości procentowych zamiast wartości całkowitych do przedstawienia ilości koloru czerwonego, zielonego i niebieskiego daje dokładnie to samo. 0 Jest 0%, a 255 to 100%. Aby uzyskać ekwiwalent procentowy, po prostu podziel liczbę całkowitą przez 255, a następnie pomnóż przez 100%.
Odchodząc od poprzedniego przykładu, jeśli wartością koloru RGBA jest rgba(255, 242, 0, 0.5)Następnie:
Czerwony: (255/255) x 100% = 100%
Zielony: (242/255) x 100% = 94.9%
Niebieski: (0/255) x 100% = 0%
Alfa: 0.5 (nie może być jednostką procentową zgodnie ze specyfikacjami CSS3)
kolor: rgba(100%, 94.9%, 0%, 0.5);
Wynik:
Żółty
Konwersja procentów na liczby całkowite
Jeśli chcesz przekonwertować wartości procentowe na wartości całkowite, pomnóż wartość procentową przez 255, a następnie podziel przez 100%. Powiedzmy, że naszym kolorem jest pomarańczowy, co można opisać następująco:
rgba(100%, 64.7%, 0%, 1)
Wynik:
Czerwony: (100% x 255) / 100% = 255
Zielony: (64.7% x 255) / 100% = 165 (w zaokrągleniu do najbliższej liczby całkowitej) Niebieski: (0% x 255) / 100% = 0
Alfa: 1
Pomarańczowy kolor powyżej po przeliczeniu z wartości procentowych na wartości całkowite to:
rgba(255, 165, 0, 1)
Wynik:
Wyjaśnienie modelu kolorów RGB
Model kolorów RGB to po prostu sposób na opisanie koloru przy użyciu ilości czerwieni, zieleni i niebieskiego koloru. To tak, jak mieszanie farb akwarelowych lub farb olejnych, aby uzyskać pożądany kolor. Wyobraź sobie, że chcesz wyprodukować plik .
Aby to zrobić, nie chciałbyś mieszać czerwieni i zieleni w kolorze. Więc ustawiliśmy czerwony i zielony na 0%, a niebieski do 100%.
RGB(0%, 0%, 100%)
Wynik:
Ale co, jeśli zamiast niebieskiego chciałeś?
Możemy tworzyć, mieszając 100% czerwieni ze 100% błękitu.
RGB(100%, 0%, 100%)
Wynik:
Z podstawowej teorii kolorów wiemy, że brak jakiegokolwiek koloru powoduje . Aby uzyskać, ustawiliśmy czerwony, zielony i niebieski na 0%.
RGB(0%, 0%, 0%)
Wynik:
Określanie kolorów RGB
Nie jestem specem od matematyki i ledwo rozumiem teorię kolorów, więc używam narzędzi do określania wartości kolorów RGB. Korzystam z funkcji programu Photoshop, aby uzyskać wartości czerwonego, zielonego i niebieskiego określonego koloru, ale dostępne są bezpłatne narzędzia online, takie jak Color Slider i The RGB Color Calculator, które mogą pomóc w tym zadaniu. Pobieranie wartości RGB za pomocą okna dialogowego Próbnik kolorów programu Photoshop
Powrót do kolorów RGBA
Chociaż notacja wartości kolorów RGBA jest dobrze obsługiwana w popularnych nowoczesnych przeglądarkach, dobrym pomysłem jest określenie jednolitych (całkowicie nieprzezroczystych/nieprzezroczystych) kolorów zastępczych na wszelki wypadek, zwłaszcza że jest to dość łatwe do zrobienia.
Powiedzmy, że mamy div, który ma i tekst, który jest . W przypadku naszych jednolitych kolorów zastępczych, w przypadku gdy rgba() nie jest obsługiwane przez przeglądarkę, możemy użyć szesnastkowej notacji kolorów lub dowolnej innej notacji wartości kolorów CSS. (W poniższym przykładzie zastosowano szesnastkową notację kolorów).
div { kolor tła: #000080; /* Awaria: granatowy w zapisie szesnastkowym */ kolor: #ffffff; /* Zastępczy: biały w notacji szesnastkowej */ kolor tła: rgba(0, 0128, 0.5); /* granatowy z kryciem 50% */ kolor: rgba(255, 255, 255, 0.3); /* biały z kryciem 30% */ }
Wynik:
Cześć!
Tak wyglądają nasze kolory zastępcze, jeśli RGBA nie jest dostępne w przeglądarce:
Cześć!
Obsługa przeglądarki
Wszystkie główne przeglądarki obsługują notację kolorów RGBA.
Aby spojrzeć na to z perspektywy, notacja CSS rgba() istnieje od czasów Internet Explorera 9 który został uruchomiony w 2011 roku (3 Lata temu).
powiązana zawartość
