Css 简明教程

CSS - Visibility

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

visibility 属性可用于创建多种效果，例如隐藏还未准备显示的元素，或隐藏仅与特定用户相关的元素。

Possible Values

  1. visible − 元素是可见的。

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

  3. collapse − 从一张表中删除表格行、列、列组和行组。如果它用于非表格元素，则 collapse 具有与 hidden 相同的含义。

  4. initial − 将某个元素的可视性设为其默认值。

  5. inherit − 从它的父元素那里继承可视性属性。

Applies to

所有 HTML 元素。

DOM Syntax

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

CSS visibility - visible Value

CSS visibility: visible 属性使元素可见。这是 visibility 属性的默认值。

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

CSS visibility - hidden Value

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 Value

若要移除表格行或列而不影响表格的布局，您可以将该行或列的 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 On Nontable Elements

以下示例演示 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 - Transition Effects

以下示例演示如何将元素隐藏在图片上悬停后：

<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>