Css 简明教程

CSS - Visibility

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

CSS visibility property allows you to show or hide an element without changing the layout of a document, while hidden elements take up space.

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

The visibility property can be used to create a variety of effects, such as hiding elements that are not yet ready to be displayed, or hiding elements that are only relevant to certain users.

Possible Values

  1. visible − The element is visible.

  2. hidden − The element is hidden, but it still takes up space on the page.

  3. collapse − Remove table rows, columns, column groups, and row groups from a table. collapse has the same meaning as hidden if it is used on nontable elements.

  4. initial − Sets the visibility of an element to its default value.

  5. inherit − Inherits the visibility property from its parent element.

Applies to

所有 HTML 元素。

All the HTML elements.

DOM Syntax

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

CSS visibility - visible Value

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

CSS visibility: visible property makes an element visible. This is the default value for the visibility property.

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

CSS visibility - hidden Value

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

The visibility: hidden property hides an element from the user’s view, but it does not remove it from the document layout.

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

The element will still be accessible to screen readers and will affect the layout of the page, even though it is not visible.

<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 。此值仅对表格元素有效。

To remove a table row or column without affecting the layout of the table, you can set the visibility property of the row or column to collapse. This value is only valid for table elements.

<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 相同：

Following example demonstrates when visibility:collapse is set on nontable elements, here we see the property acts same as 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

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

Following example demonstrates how the element is hidden on hovering over an image:

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