CSS visibility属性允许您在不更改文档布局的情况下显示或隐藏元素，而隐藏的元素会占用空间。

可见性属性可用于创建各种效果，例如作为隐藏尚未准备好显示的元素，或隐藏仅与某些用户相关的元素。

属性值

  • visible: 元素是可见的。

  • hidden: 元素是隐藏的，但它仍然占用页面上的空间。

  • collapse: 从表中删除表行、列、列组和行组。如果用在非表元素上，collapse 与 hide 的含义相同。

  • 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>yxjc123 CSS visibility</h2>
</body>
</html>

CSS visibility: hidden

visibility:hidden 属性从用户视图中隐藏元素，但不会将其从用户视图中删除。文档布局。

该元素仍然可供屏幕阅读器访问，并将影响页面的布局，即使它不可见。

<html>
<head>
<style>
   h2 {
      visibility: hidden;
   }
</style>
</head>
<body>
   <h2>yxjc123 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

要删除表格行或列而不影响表格布局，可以将行或列的可见性属性设置为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">你看的到我吗?</p>
  <p>上面那段文字被隐藏</p>
</body>
</html>

CSS visibility: collapse

以下示例演示了如何在将鼠标悬停在图像上时隐藏元素:

<html>
<head>
<style>
   .collapse {
      visibility: collapse;
   }
   img:hover + .hidable {
    visibility: hidden;
  }
</style>
</head>
<body>
  <img src="/static/default/images/logo.png" style="cursor:pointer;" />
  <h2 class="hidable">将鼠标悬停在上图上会隐藏!</h2>
</body>
</html>