CSS - visibility 属性

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

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

可能的值

visible -元素是可见的。
hidden -该元素是隐藏的，但它仍然占用页面上的空间。
collapse −从表中删除表的行、列、列组和行组。如果对非表元素使用 Collapse，则它与 Hidden 具有相同的含义。
initial -将元素的 visibility 设置为其默认值。
inherit -从其父元素继承 visibility 属性。

适用于

所有 HTML 元素。

DOM 语法


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

CSS visibility - 可见值

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


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

CSS visibility - 隐藏值

“ 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 - 折叠值

若要在不影响表布局的情况下删除表行或列，可以将行或列的 visibility 属性设置为折叠。此值仅对表元素有效。


<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 - 在非表元素上折叠

以下示例演示了当在非表元素上设置 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>

打印本页