A propriedade CSS de visibilidade pode mostrar ou ocultar um elemento sem afetar o layout de um documento (ou seja, o espaço é criado para elementos independentemente de serem visíveis ou não). A propriedade também pode ocultar linhas ou colunas em um <table>.
visibility: hidden; <Parecido com o display: none; a tag e removida da html>
visibility: visible; <Indica que o elemento esta visível>
opacity: "valor em %" <Define a opacidade do elemento na html>
A propriedade CSS visibility é usada para controlar a visibilidade de um elemento HTML em uma página da web. Ela possui dois valores principais: visible e hidden, além de um terceiro valor chamado collapse, que é especificamente usado para tabelas em HTML.
visible: Este é o valor padrão. Ele faz com que o elemento seja visível na página. Se você definir visibility: visible;, o elemento será exibido normalmente.Exemplo:
elemento {
visibility: visible;
}
hidden: Quando você define visibility: hidden;, o elemento continua ocupando espaço na página, mas ele fica invisível. No entanto, ao contrário de definir display: none;, o elemento ainda afetará o layout da página, pois seu espaço é reservado.Exemplo:
elemento {
visibility: hidden;
}
collapse (apenas para tabelas HTML): Este valor é usado especificamente para tabelas HTML e faz com que as linhas e colunas de uma tabela desapareçam, mas a tabela em si ainda é renderizada. O comportamento exato pode variar de acordo com o navegador.Exemplo:
tabela {
visibility: collapse;
}
Em resumo, a propriedade visibility é usada para controlar se um elemento é visível ou invisível em uma página, mantendo ou não o espaço ocupado pelo elemento. Tenha em mente que, quando um elemento tem visibility: hidden;, ele ainda pode ser acessado por meio do DOM e JavaScript, ao contrário de quando display: none; é usado.