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.