Opacity

Właściwość opacity w CSS3 jest używana do ustawiania przezroczystości elementu, włącznie z jego zawartością. Wartość opacity może przyjmować liczby z zakresu od 0.0 do 1.0, gdzie 0.0 oznacza całkowitą przezroczystość (element jest niewidoczny), a 1.0 oznacza pełną nieprzezroczystość (element jest w pełni widoczny). Właściwość ta umożliwia twórcy strony dodawanie efektów przezroczystości do dowolnego elementu HTML, co może być wykorzystane do tworzenia subtelnych efektów wizualnych lub wskazania interaktywności elementu.

Przykłady użycia opacity

Poniżej przedstawiono kilka przykładów użycia opacity w CSS3, które ilustrują różne zastosowania tej właściwości.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykład wykorzystania opacity w CSS3</title>
    <style>
        /* Styl dla elementu z pełną nieprzezroczystością */
        .opaque {
            opacity: 1; /* Pełna nieprzezroczystość */
            background-color: red;
            padding: 20px;
            color: white;
            text-align: center;
        }
        /* Styl dla elementu z częściową przezroczystością */
        .semi-transparent {
            opacity: 0.5; /* 50% przezroczystości */
            background-color: green;
            padding: 20px;
            color: white;
            text-align: center;
        }
        /* Styl dla elementu z całkowitą przezroczystością */
        .transparent {
            opacity: 0; /* Całkowita przezroczystość */
            background-color: blue;
            padding: 20px;
            color: white;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="opaque">Pełna nieprzezroczystość (opacity: 1)</div>
    <div class="semi-transparent">Częściowa przezroczystość (opacity: 0.5)</div>
    <div class="transparent">Całkowita przezroczystość (opacity: 0)</div>
</body>
</html>

Opis przykładu

  • Pełna nieprzezroczystość: Pierwszy element (div.opaque) jest w pełni nieprzezroczysty, co oznacza, że nie jest przezroczysty w żadnym stopniu. Jego wartość opacity wynosi 1.
  • Częściowa przezroczystość: Drugi element (div.semi-transparent) ma ustawioną wartość opacity na 0.5, co oznacza, że jest on częściowo przezroczysty i pozwala prześwitywać tło za nim w 50%.
  • Całkowita przezroczystość: Trzeci element (div.transparent) jest całkowicie przezroczysty (niewidoczny) dzięki ustawieniu wartości opacity na 0. Mimo że element jest niewidoczny, nadal zajmuje miejsce w układzie strony.

Podsumowanie

Właściwość opacity w CSS3 jest potężnym narzędziem, które pozwala na łatwe dodawanie efektów przezroczystości do elementów na stronie. Może być wykorzystywana do tworzenia efektów wizualnych, takich jak łagodne przejścia, ukrywanie i pokazywanie elementów, oraz do wskazywania stanu elementów interaktywnych.

Poprzedni
Następny
Scroll to Top