Autor publikacji
Virtual Patriot - Administrator

saturate()

Data publikacji
Ostatnio edytowano

Przeznaczenie funkcji saturate()

Za pomocą funkcji saturate() możemy określić procent nasycenia koloru.

Parametry funkcji saturate()

Przykładowe zapisy

saturate(150%)

saturate(1.5)

saturate(222.5%)

saturate(2.225)

percent

Parametr percent jest wymaganym parametrem funkcji saturate(). Parametr percent określa procent nasycenia koloru. Im większy procent tym nasycenie koloru będzie większe.

Zakres wartości

od 0 w górę (procenty lub dowolna liczba)

Wartość domyślna

100% (równoznaczna z wartością 1)

Występowanie funkcji saturate()

  1. filter
  2. backdrop-filter

Przykład funkcji saturate()

  filter:saturate(150%);
obrazek przed zmianą kolorystyki za pomocą funkcji saturate() obrazek po zmianie kolorystyki za pomocą funkcji saturate()

Procent nasycenia kolorów przykładowego elementu "img" został zmieniony, ponieważ do wspomnianego elementu "img" została dodana właściwość "filter" wraz z wartością w postaci funkcji "saturate()", w której to funkcji została użyta wartość "150%".

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;
      }

      img {
        filter:saturate(150%);
      }
    </style>
  </head>

  <body>

    <img src="https://webkod.pl/files/css/zwierze-01.png" alt="zdjęcie lwa">

  </body>
</html>

Interpretacja funkcji saturate()

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

tak

Zobacz więcej informacji o interpretacji funkcji .