31. Jakie są różnice między `opacity` a `visibility` w CSS?

opacity i visibility to właściwości CSS używane do kontrolowania widoczności elementów, ale mają różne efekty na układ strony i interakcję z elementami.

opacity:

• Ustawia przezroczystość elementu.
• Wartości od 0 (całkowicie przezroczysty) do 1 (całkowicie nieprzezroczysty).
• Element pozostaje w dokumencie i zajmuje przestrzeń.
• Element jest nadal interaktywny, nawet gdy jest przezroczysty.

Przykład:

.element {
  opacity: 0.5;
}

visibility:

• Kontroluje, czy element jest widoczny czy ukryty.
• visible - element jest widoczny.
• hidden - element jest ukryty, ale nadal zajmuje przestrzeń w układzie.
• collapse - używane w tabelach, usuwa wiersz lub kolumnę i zwalnia przestrzeń.
• Elementy ukryte nie są interaktywne.

Przykład:

.element {
  visibility: hidden;
}

Różnice:

• opacity zmienia przezroczystość elementu, ale element pozostaje w układzie i jest interaktywny.
• visibility ukrywa element, ale zachowuje jego miejsce w układzie i usuwa jego interaktywność.