Ostatnio edytowany:

opacity

Autor: Virtual Patriot

Opis właściwości opacity

Za pomocą właściwości opacity możemy określić procent przezroczystości interesującego nas elementu HTML.

Dodatkowe techniczne informacje o właściwości opacity

przeznaczenie
  • element HTML każdego typu
dziedziczenie
  • nie
wartość initial
  • 1
wyjątki initial
  • brak
animowanie
  • tak

Interpretacja właściwości opacity

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 9

Edge

tak

Zobacz więcej informacji o interpretacji właściwości .

Opis wartości właściwości opacity

liczba

Opis

Za pomocą właściwości opacity oraz dowolnej nieujemnej liczby (z zakresu od 0.0 do 1.0) możemy określić procent przezroczystości interesującego nas elementu HTML.

Przykład

procent przezroczystości tego elementu "div" wynosi 50 procent, ponieważ do tego elementu "div" została dodana właściwość "opacity" wraz z wartością "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(http://webkod.pl/files/css/obrazek-01.png);
        padding:1em;
      }

      #dziecko {
        opacity:0.5;
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div id="rodzic">
      <div id="dziecko">
        procent przezroczystości tego elementu "div" wynosi 50 procent, ponieważ do tego elementu "div" została dodana właściwość "opacity" wraz z wartością "0.5"
      </div>
    </div>

  </body>
</html>