Autor publikacji
Virtual Patriot - Administrator

opacity()

Data publikacji
Ostatnio edytowano

Przeznaczenie funkcji opacity()

Za pomocą funkcji opacity() możemy określić procent przezroczystości koloru.

Parametry funkcji opacity()

Przykładowe zapisy

opacity(58%)

opacity(0.58)

opacity(34.6%)

opacity(0.346)

percent

Parametr percent jest wymaganym parametrem funkcji opacity(). Parametr percent określa procent przezroczystości koloru. Im większy procent tym przezroczystość koloru będzie mniejsza.

Zakres wartości

0 - 100% lub 0.0 - 1.0

Wartość domyślna

100%

Występowanie funkcji opacity()

  1. filter
  2. backdrop-filter

Przykład funkcji opacity()

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

Procent przezroczystości 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 "opacity()", w której to funkcji została użyta wartość "60%".

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

      div {
        background-image:url(https://webkod.pl/files/css/obrazek-01.png);
      }

      img {
        filter:opacity(60%);
      }
    </style>
  </head>

  <body>

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

  </body>
</html>

Interpretacja funkcji opacity()

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

tak

Zobacz więcej informacji o interpretacji funkcji .