visibility
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
visibility CSS 属性显示或隐藏元素而不更改文档的布局。该属性还可以隐藏 <table> 中的行或列。
尝试一下
visibility: visible;
visibility: hidden;
visibility: collapse;
<section class="default-example" id="default-example">
<div class="example-container">
<div class="transition-all" id="example-element">Hide me</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
</section>
.example-container {
border: 1px solid #c5c5c5;
padding: 0.75em;
width: 80%;
max-height: 300px;
display: flex;
}
.example-container > div {
background-color: rgba(0, 0, 255, 0.2);
border: 3px solid blue;
margin: 10px;
flex: 1;
}
#example-element {
background-color: rgba(255, 0, 200, 0.2);
border: 3px solid rebeccapurple;
}
要隐藏并从文档布局中移除元素，请将 display 属性设置为 none 来代替 visibility 属性。
语法
css
/* 关键字值 */
visibility: visible;
visibility: hidden;
visibility: collapse;
/* 全局值 */
visibility: inherit;
visibility: initial;
visibility: revert;
visibility: revert-layer;
visibility: unset;
visibility 属性可被指定为以下值：
值
无障碍考虑
将元素的 visibility 的值设置为 hidden 会将其从可访问性树中移除。这将导致元素及其所有子元素不再被屏幕阅读器所读取。
插值
在设置动画时，会对 visibility 在可见和不可见之间插值。因此起始值或结束值之一必须是 visible，否则不会发生插值。该值会以离散的步长进行插值，计时函数的值介于 0 到 1 之间，会被映射到 visible，对于其他计时函数的值（即过渡开始/结束时或 cubic-bezier() 函数结果的 y 值在 [0, 1] 的范围之外）则映射到较为接近的一个端点。
备注
有些现代浏览器对 visibility: collapse 不支持或是不完全支持。很多时候用在不是表格行与列的元素上时不会正确的将它显示成 visibility: hidden 的效果。
visibility:collapse 会改变表格的布局，嵌套在其被折叠的单元格中的表格也会同样被折叠，除非专门为此嵌套表格指定 visibility: visible。
形式定义
| 初始值 | visible |
|---|---|
| 适用元素 | 所有元素 |
| 是否是继承属性 | 是 |
| 计算值 | as specified |
| 动画类型 | a visibility |
形式语法
visibility =
visible |
hidden |
force-hidden |
collapse
示例
基础示例
HTML
html
<p class="visible">第一段是可见的。</p>
<p class="not-visible">第二段是不可见的。</p>
<p class="visible">第三段是可见的。注意第二段仍占用空间。</p>
CSS
css
.visible {
visibility: visible;
}
.not-visible {
visibility: hidden;
}
表格示例
HTML
html
<table>
<tr>
<td>1.1</td>
<td class="collapse">1.2</td>
<td>1.3</td>
</tr>
<tr class="collapse">
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
CSS
css
.collapse {
visibility: collapse;
}
table {
border: 1px solid red;
}
td {
border: 1px solid gray;
}
规范
| Specification |
|---|
| CSS Display Module Level 3 # visibility |
| Scalable Vector Graphics (SVG) 2 # VisibilityControl |
浏览器兼容性
display