Autor publikacji
Virtual Patriot - Administrator

invert()

Data publikacji
Ostatnio edytowano

Przeznaczenie funkcji invert()

Za pomocą funkcji invert() możemy określić procent odwrócenia koloru.

Parametry funkcji invert()

Przykładowe zapisy

invert(100%)

invert(1)

invert(75.9%)

invert(0.759)

percent

Parametr percent jest wymaganym parametrem funkcji invert(). Parametr percent określa procent odwrócenia koloru. Im większy procent tym kolor będzie posiadał większy stopień inwersji (odwrócenia).

Zakres wartości

0 - 100% lub 0.0 - 1.0

Wartość domyślna

0

Występowanie funkcji invert()

  1. filter
  2. backdrop-filter

Przykład funkcji invert()

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

Procent odwrócenia 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 "invert()", w której to funkcji została użyta wartość "100%".

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:invert(100%);
      }
    </style>
  </head>

  <body>

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

  </body>
</html>

Interpretacja funkcji invert()

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

tak

Zobacz więcej informacji o interpretacji funkcji .