1. Web
  2. CSS
  3. visibility

visibility

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨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: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  margin: 10px;
  flex: 1;
}

#example-element {
  background-color: rgb(255 0 200 / 0.2);
  border: 3px solid rebeccapurple;
}

若要隐藏元素并将其从文档布局中移除，请将 display 属性设置为 none，而不是使用 visibility。

语法

css
/* Keyword values */
visibility: visible;
visibility: hidden;
visibility: collapse;

/* Global values */
visibility: inherit;
visibility: initial;
visibility: revert;
visibility: revert-layer;
visibility: unset;

visibility 属性通过下面列出的关键词值之一指定。

值

visible

元素框可见。

hidden

元素框不可见（不绘制），但仍正常影响布局。如果元素的后代将 visibility 设置为 visible，它们将可见。该元素无法获得焦点（例如通过 tab 索引导航时）。

collapse

collapse 关键词对不同元素有不同的效果

  • 对于 <table> 行、列、列组和行组，行或列被隐藏，并且它们占用的空间被移除（如同将 display: none 应用于表格的列/行）。然而，其他行和列的大小仍按折叠行或列中的单元格存在时进行计算。此值允许快速从表格中移除行或列，而无需强制重新计算整个表格的宽度和高度。
  • 折叠的弹性项目和 Ruby 注释被隐藏，并且它们占用的空间被移除。
  • 对于其他元素，collapse 的处理方式与 hidden 相同。

无障碍

对元素使用 hidden 的 visibility 值会将其从可访问性树中移除。这将导致该元素及其所有后代元素不再被屏幕阅读技术播报。

插值

动画时，visibility 值在可见和不可见之间插值。因此，起始或结束值之一必须是 visible，否则无法进行插值。该值作为离散步骤进行插值，其中缓动函数在 0 和 1 之间的值映射到 visible，缓动函数的其他值（仅在过渡开始/结束时或由于 y 值超出 [0, 1] 的 cubic-bezier() 函数而发生）映射到更近的端点。

注意

  • 在某些现代浏览器中，visibility: collapse 的支持缺失或部分不正确。对于表格行和列以外的元素，它可能无法被正确地视为 visibility: hidden。
  • 当应用于表格行时，如果表格包含跨越可见行和折叠行的单元格（<td> 和 <th> 元素），则单元格可能会以意外的方式渲染。如果跨越单元格在折叠行中定义，浏览器不会渲染表格单元格，如同后续行中的单元格存在并应用了 visibility: collapse。当单元格在可见行中定义并跨越折叠行时，单元格内容不会重排，但单元格本身的呈现方式因浏览器而异。大多数浏览器会通过隐藏行的块大小来减小单元格的块大小。这意味着内容在块大小方向上可能大于单元格。根据浏览器，溢出内容要么被裁剪，如同设置了 overflow: hidden，而在其他浏览器中内容会溢出到后续行，如同设置了 overflow: visible。在其他浏览器中，单元格的渲染方式如同该行未折叠，而该行中的所有其他单元格都被隐藏，如同 visibility: collapse 应用于单个单元格而非行本身。
  • 如果表格在折叠的单元格中包含嵌套表格，visibility: collapse 可能会改变表格的布局，除非在嵌套表格上明确指定 visibility: visible。

正式定义

初始值visible
应用于所有元素
继承性是
计算值同指定值
动画类型一个 visibility

正式语法

visibility = 
  visible       |
  hidden        |
  force-hidden  |
  collapse

示例

基本示例

HTML

html
<p class="visible">The first paragraph is visible.</p>
<p class="not-visible">The second paragraph is NOT visible.</p>
<p class="visible">
  The third paragraph is visible. Notice the second paragraph is still occupying
  space.
</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;
}

规范

规范
CSS Display Module Level 3
# visibility
Scalable Vector Graphics (SVG) 2
# VisibilityControl

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面由MDN 贡献者最后修改于 。

在 GitHub 上查看此页面 • 报告此内容存在的问题
© . Content available under a Creative Commons license.