CSS - 可见性

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

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

可见性属性可以采用以下任意值：

可见 -元素是可见的。
隐藏 -元素被隐藏，但它仍然占用页面上的空间。
折叠 -从表中删除表行、列、列组和行组。如果在非表元素上使用，collapse与hidden具有相同的含义。
初始 -将元素的可见性设置为其默认值。
继承 -从其父元素继承可见性属性。

CSS 可见性 - 演示

尝试为 CSS可见性属性选择不同的值，并在右侧框中查看结果。

CSS 可见性 - 使元素可见

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

例子

这是一个例子 -

<html>
<head>
<style>
   h2 {
      visibility: visible;
   }
</style>
</head>
<body>
   <h2>This element will remain visible</h2>
</body>
</html>

CSS Hidden - 隐藏元素

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

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

例子

这是一个例子 -

<html>
<head>
<style>
   .visible {
      visibility: visible;
   }
   .hidden {
      visibility: hidden;
   }
</style>
</head>
<body>
   <h2 class="visible">This element will be visible</h2>
   <h2 class="hidden">This element will be hidden</h2>
</body>
</html>

CSS 可见性折叠

要删除表格行或列而不影响表格布局，可以将行或列的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>Orange</td>
         <td>Magoes</td>
         <td class="collapse">Carbs</td>
      </tr>
      <tr>
         <td>Banana</td>
         <td>Dates</td>
         <td>Nuts</td>
      </tr>
   </table>
</body>
</html>

非表元素上的 CSS 可见性崩溃

以下示例演示了在非表元素上设置visibility:collapse时，我们看到该属性的Behave与visibility:hidden相同：

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

</style>
</head>
<body>
  <h2>Collapse a Non-Table Elements</h2>
  <h2 class="collapse">1 - You can not see this element</h2>
  <h2>2 - You can see this element</h2>
</body>
</html>

CSS 可见性过渡效果

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

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