Autor publikacji
Virtual Patriot - Administrator

rgba()

Data publikacji
Ostatnio edytowano

Przeznaczenie funkcji rgba()

Za pomocą funkcji rgba() możemy określić wartość interesującego nas koloru wraz z dodatkowym procentem przezroczystości.

Parametry funkcji rgba()

Przykładowe zapisy

rgba(188, 59, 213, 0.6)

rgba(255, 0, 200, 0.45)

rgba(90, 185, 45, 0.764)

red

Parametr red jest wymaganym parametrem funkcji rgba(). Parametr red określa intensywność barwy czerwonej. Im większa wartość parametru red tym intensywność barwy czerwonej nowo powstającego koloru będzie większa.

Zakres wartości

0 - 255 (tylko liczby całkowite)

Wartość domyślna

brak

green

Parametr green jest wymaganym parametrem funkcji rgba(). Parametr green określa intensywność barwy zielonej. Im większa wartość parametru green tym intensywność barwy zielonej nowo powstającego koloru będzie większa.

Zakres wartości

0 - 255 (tylko liczby całkowite)

Wartość domyślna

brak

blue

Parametr blue jest wymaganym parametrem funkcji rgba(). Parametr blue określa intensywność barwy niebieskiej. Im większa wartość parametru blue tym intensywność barwy niebieskiej nowo powstającego koloru będzie większa.

Zakres wartości

0 - 255 (tylko liczby całkowite)

Wartość domyślna

brak

alpha

Parametr alpha jest wymaganym parametrem funkcji rgba(). Parametr alpha określa procent przezroczystości koloru. Im większy procent tym przezroczystość nowo powstającego koloru będzie mniejsza.

Zakres wartości

0.0 - 1.0 (wartość 0.5 oznacza 50%, wartość 0.24 oznacza 24%, wartość 0.758 oznacza 75.8% itd.)

Wartość domyślna

brak

Przykład funkcji rgba()

  background-color:rgba(37, 244, 182, 0.5);
tło tego elementu "div" posiada nowy kolor oraz jest przezroczyste w pięćdziesięciu procentach, ponieważ do tego elementu "div" została dodana właściwość "background-color" wraz z wartością w postaci funkcji "rgba()", w której to funkcji zostały użyte następujące wartości: "37, 244, 182, 0.5"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      #rodzic {
        background-image:url(https://webkod.pl/files/css/obrazek-01.png);
        padding:1em;
      }

      #dziecko {
        background-color:rgba(37, 244, 182, 0.5);
        padding:1em;
        font-size:1.3em;
      }
    </style>
  </head>

  <body>

    <div id="rodzic">
      <div id="dziecko">
        tło tego elementu "div" posiada nowy kolor oraz jest przezroczyste w pięćdziesięciu procentach, ponieważ do tego elementu "div" została dodana właściwość "background-color" wraz z wartością w postaci funkcji "rgba()", w której to funkcji zostały użyte następujące wartości: "24, 244, 182, 0.9"
      </div>
    </div>

  </body>
</html>

Interpretacja funkcji rgba()

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 9

Edge

tak

Zobacz więcej informacji o interpretacji funkcji .