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>

打印页面