CSS - 可見性

CSS 的visibility屬性允許您顯示或隱藏元素，而不會更改文件的佈局，而隱藏的元素仍然佔用空間。

visibility屬性可用於建立各種效果，例如隱藏尚未準備好顯示的元素，或隱藏僅與某些使用者相關的元素。

可能的值

visible − 元素可見。
hidden − 元素隱藏，但它仍然佔用頁面上的空間。
collapse − 從表格中移除表格行、列、列組和行組。如果用於非表格元素，collapse與hidden含義相同。
initial − 將元素的可見性設定為其預設值。
inherit − 從其父元素繼承可見性屬性。

應用於

所有HTML元素。

DOM 語法

visibility: visible | hidden | collapse | initial | inherit;

CSS visibility - visible 值

CSS 的visibility: visible屬性使元素可見。這是visibility屬性的預設值。

<html>
<head>
<style>
   h2 {
      visibility: visible;
   }
</style>
</head>
<body>
   <h2>Tutorialspoint CSS visibility</h2>
</body>
</html>

CSS visibility - hidden 值

visibility: hidden屬性將元素隱藏在使用者的視線之外，但不會將其從文件佈局中移除。

即使元素不可見，螢幕閱讀器仍然可以訪問它，並且它會影響頁面的佈局。

<html>
<head>
<style>
   h2 {
      visibility: hidden;
   }
</style>
</head>
<body>
   <h2>Tutorialspoint CSS visibility hidden</h2>
   <p>The hidden heading is still visible to screen readers and takes up space in the page.</p>
</body>
</html>

CSS visibility - collapse 值

要移除表格行或列而不影響表格的佈局，可以將該行或列的visibility屬性設定為collapse。此值僅對錶格元素有效。

<html>
<head>
<style>
   .collapse {
      visibility: collapse;
   }
   table {
      border-collapse: collapse;
      color: #ffffff;
      width: 100%;
      background-color: #35DC5A;
      border: 2px solid black;
   }
   th,
   td {
      border: 2px solid black;
      padding: 8px;
      text-align: left;
      font-size: 20px;
   }
</style>
</head>
<body>
   <table>
      <tr>
         <td>visible</td>
         <td>hidden</td>
         <td class="collapse">collapse</td>
      </tr>
      <tr>
         <td>initial</td>
         <td>inherit</td>
         <td>revert</td>
      </tr>
   </table>
</body>
</html>

CSS visibility - 非表格元素上的 Collapse

下面的示例演示了當在非表格元素上設定visibility:collapse時，該屬性的作用與visibility:hidden相同。

<html>
<head>
<style>
   .collapse {
      visibility: collapse;
   }

</style>
</head>
<body>
  <h2>Collapse on nontable elements</h2>
  <p class="collapse">you cant see me</p>
  <p>the above sentence is hidden</p>
</body>
</html>

CSS visibility - 過渡效果

下面的示例演示瞭如何透過懸停在影像上來隱藏元素。

<html>
<head>
<style>
   .collapse {
      visibility: collapse;
   }
   img:hover + .hidable {
    visibility: hidden;
  }
</style>
</head>
<body>
  <img src="images/tutimg.png" style="cursor:pointer;" />
  <h2 class="hidable">Hovering over the above image hides me!</h2>
</body>
</html>

列印頁面