Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

CSS: Zapis kolorów w notacji rgba

piątek,

CSS: Zapis kolorów w notacji rgba

W CSS kolory można zapisywać przy użyciu notacji rgba(), która pozwala na określenie kolorów w modelu RGB (Red, Green, Blue) z dodatkowym komponentem alpha reprezentującym przezroczystość. Format rgba() jest bardzo przydatny, gdy chcesz kontrolować nie tylko kolor, ale również stopień przezroczystości elementu.

Format RGBA

Notacja rgba() składa się z czterech wartości:

  1. R (Red): Wartość czerwonego koloru (0-255).
  2. G (Green): Wartość zielonego koloru (0-255).
  3. B (Blue): Wartość niebieskiego koloru (0-255).
  4. A (Alpha): Wartość przezroczystości (0-1), gdzie 0 oznacza całkowitą przezroczystość, a 1 pełną nieprzezroczystość.

Przykłady użycia

.transparent-red {
    background-color: rgba(255, 0, 0, 0.5); /* Półprzezroczysty czerwony */
}

.transparent-green {
    background-color: rgba(0, 255, 0, 0.3); /* Półprzezroczysty zielony z 30% przezroczystością */
}

.transparent-blue {
    background-color: rgba(0, 0, 255, 0.7); /* Półprzezroczysty niebieski z 70% przezroczystością */
}

.semi-transparent-white {
    background-color: rgba(255, 255, 255, 0.8); /* Półprzezroczysty biały z 80% przezroczystością */
}

.fully-transparent {
    background-color: rgba(0, 0, 0, 0); /* Całkowicie przezroczysty */
}

Uwagi

  • Notacja rgba() jest szeroko obsługiwana przez nowoczesne przeglądarki internetowe.
  • Wartość alpha (A) w rgba() jest wartością zmiennoprzecinkową w zakresie od 0 do 1, co daje dużą kontrolę nad stopniem przezroczystości.
  • rgba() jest szczególnie użyteczna w projektowaniu interfejsów użytkownika i stron internetowych, gdzie potrzebna jest subtelna kontrola nad przezroczystością elementów, np. dla tła, nakładek, efektów hover i innych efektów wizualnych.
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