Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

CSS: Kolory - notacja HEXA

piątek,

CSS: Kolory - notacja HEXA

W CSS możliwe jest definiowanie kolorów w formacie heksadecymalnym z uwzględnieniem przezroczystości. W tym celu używa się rozszerzonego formatu HEX, który obejmuje dodatkowe dwie cyfry reprezentujące wartość alfa (przezroczystość). Taki format jest często nazywany HEXA (HEX + Alpha).

Format Heksadecymalny z przezroczystością (HEXA)

  • Format HEXA składa się z 8 znaków: #RRGGBBAA.
  • Pierwsze sześć znaków (RRGGBB) definiuje kolor w tradycyjnym formacie HEX.
  • Ostatnie dwie cyfry (AA) reprezentują wartość przezroczystości (alfa), gdzie 00 oznacza całkowitą przezroczystość (niewidoczny), a FF pełną nieprzezroczystość.

Przykłady:

  1. Półprzezroczysty Czerwony: #FF000080

    • R: FF
    • G: 00
    • B: 00
    • A: 80 (128 w systemie dziesiętnym, około 50% przezroczystości)
  2. Półprzezroczysty Zielony: #00FF0040

    • R: 00
    • G: FF
    • B: 00
    • A: 40 (64 w systemie dziesiętnym, około 25% przezroczystości)
  3. Półprzezroczysty Niebieski: #0000FF60

    • R: 00
    • G: 00
    • B: FF
    • A: 60 (96 w systemie dziesiętnym, około 37,5% przezroczystości)

Przykład użycia

.transparent-red {
    background-color: #FF000080; /* Półprzezroczysty czerwony */
}

.transparent-green {
    background-color: #00FF0040; /* Półprzezroczysty zielony */
}

.transparent-blue {
    background-color: #0000FF60; /* Półprzezroczysty niebieski */
}

Uwaga!

  • Format HEXA nie jest obsługiwany przez wszystkie przeglądarki, szczególnie starsze wersje.
  • Alternatywą dla HEXA, która jest bardziej powszechnie obsługiwana, jest użycie notacji rgba(), gdzie można określić kolor i przezroczystość, np. rgba(255, 0, 0, 0.5) dla półprzezroczystego czerwonego.

Używanie HEXA jest przydatne, gdy potrzebujemy precyzyjnie kontrolować zarówno kolor, jak i poziom przezroczystości elementu w naszych projektach CSS.

Artykuł: Pierwszy dzień w Splicie

Pierwszy dzień w Splicie

Artykuł: OpenSolaris

OpenSolaris

Artykuł: Bob Frankston

Bob Frankston

Artykuł: Staże w Chorwacji

Staże w Chorwacji

Artykuł: 3Com

3Com

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły