可見性 visibility、content-visibility、透明度 opacity

visibility 和 opacity 樣式屬性就如同字面的意思，表示元素的可見性和透明度，這篇教學所介紹的樣式可以將元素「顯示」或「隱藏」，這篇教學會介紹元素可見性 visibility、內容可見性 content-visibility 以及 opacity 透明度的用法。

快速導覽：

• visibility 元素可見性
  • 屬性值 visible 和 hidden
  • 屬性值 collapse
• content-visibility 內容可見性
• opacity 透明度

visibility 元素可見性

visibility 是一個很簡單的樣式屬性，可以將元素「隱藏」或「顯示」，因為具有繼承特性，所以如果父元素設定了隱藏，則子元素也會一併隱藏，這個樣式有下列屬性值：

屬性值 visible 和 hidden

visibility 的屬性值 visible 和 hidden 分別表示元素「顯示」或「隱藏」，但隱藏不等於 display:none 的完全消失，仍然會保留原本所佔的容器空間 ( 類似 opacity:0 )，隱藏元素所包含的子元素也會一併隱藏，也會失去透過鍵盤 tab 切換焦點的功能 ( 例如切換選單 )。

下方的範例將 strong 元素和 h3 元素設定為 visibility:hidden，這兩個元素就會從畫面中消失，但其空間仍然保留。

線上展示：https://codepen.io/oxxo/pen/xxoyzyX

<!-- HTML 程式碼 -->
<div>
  STEAM 教育學習網秉持著 STEAM/STEM 的精神<strong>OXXO.STUDIO</strong>，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。
</div>
<div>
  <h2>apple</h2>
  <h3>banana</h3>
  <h4>orange</h4>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    margin: 10px;
  }

  strong, h3 {
    border: 1px solid red;
    visibility: hidden; 
  }
</style>

屬性值 collapse

collapse 是針對「表格」元素的屬性值，只要是 tr、tbody、col 和 colgroup 相關元素，設定後效果等於 display:none，元素會消失且不佔空間，如果是其他元素，則表現如同 visibility:hidden。

下方範例呈現三個表格，第一個是正常表格，第二個表格使用 visibility:hidden 的 tr 會保留空間，第三個表格使用 visibility:collapse 的 tr 就會完全消失。

線上展示：https://codepen.io/oxxo/pen/wvLYXYL

<!-- HTML 程式碼 -->
<table class="a">
  <tr><td>apple</td><td>banana</td><td>oxxo</td></tr>
  <tr><td>100</td><td>200</td><td>300</td></tr>
  <tr><td>9999</td><td>8888</td><td>7777</td></tr>
</table>
<table class="b">
  <tr><td>apple</td><td>banana</td><td>oxxo</td></tr>
  <tr><td>100</td><td>200</td><td>300</td></tr>
  <tr><td>9999</td><td>8888</td><td>7777</td></tr>
</table>
<table class="c">
  <tr><td>apple</td><td>banana</td><td>oxxo</td></tr>
  <tr><td>100</td><td>200</td><td>300</td></tr>
  <tr><td>9999</td><td>8888</td><td>7777</td></tr>
</table>

<!-- CSS 程式碼 -->
<style>
  table {
    margin: 10px;
    border: 3px solid #000;
  }
  td {
    border: 1px solid #000;
  }
  .b tr:first-child {
    visibility: hidden;
  }
  .c tr:first-child {
    visibility: collapse;
  }
</style>

如果是作用在其他元素，表現就會如同 visibility:hidden，下方範例的兩個 h3 分別套用了 visibility:hidden 和 visibility:collapse，呈現的結果完全相同。

線上展示：https://codepen.io/oxxo/pen/rNEqKQj

<!-- HTML 程式碼 -->
<div class="a">
  <h2>apple</h2>
  <h3>banana</h3>
  <h4>oxxo</h4>
</div>
<div class="b">
  <h2>apple</h2>
  <h3>banana</h3>
  <h4>oxxo</h4>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    margin: 10px;
    width: 200px;
  }

  .a h3 {
    visibility: hidden;
  }

  .b h3 {
    visibility: collapse;
  }
</style>

content-visibility 內容可見性

content-visibility 是一個可以將「元素的內容」隱藏或顯示的樣式屬性，具有繼承特性，有下列屬性值：

下方範例會展示屬性值 visible 和 hidden 的差異，可以看出 content-visibility: hidden 並不會保留容器空間，表現行為和 display:none 類似 ( 注意，如果使用 visibility: hidden 會保留容器空間 )。

線上展示：https://codepen.io/oxxo/pen/JoPvqqa

<!-- HTML 程式碼 -->
<div class="a">
  <h3>apple</h3><h3>banana</h3><h3>oxxo</h3>
</div>
<div>
  <h3>apple</h3><h3>banana</h3><h3>oxxo</h3>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    padding: 5px;
    margin: 10px;
    background: #fc0;
  }
  .a {content-visibility: hidden;}
</style>

如果設定 auto 屬性值表示，當元素內容「與使用者相關時」才會顯示，不然就會隱藏，這種做法主要針對「過長」的頁面，透過自動隱藏和顯示的做法，可以替頁面提高執行效率，下方列出與使用者相關的情形：

• 元素出現在畫面中。
• 元素進入瀏覽器定義的頁面範圍 ( 通常是瀏覽視窗尺寸的 50%，提供瀏覽器有足夠的時間渲染元素 ）。
• 元素或其內容獲得焦點 ( 例如被選取或被程式點擊 )。
• 元素或其內容放置在最上層。

通常使用 auto 屬性值會搭配 contain-intrinsic-size 才會突顯視覺效果，下方的範例會產生一個「過長」的頁面，接著透過 contain-intrinsic-size: auto 1000px 設定尚未渲染時元素內容預設高度為 1000px，透過 content-visibility: auto 隱藏畫面外的內容，當使用者開始捲動捲軸時，才會開始渲染進入頁面範圍的內容，「捲軸的長度」也就會發生變化，直到頁面全部渲染完成，捲軸長度就會固定。 ( 這個做法只是在證明尚未出現在畫面中的元素還沒有被渲染 )

線上展示：https://codepen.io/oxxo/pen/JoPvQXw

<!-- HTML 程式碼 -->
<div><h3>區塊 1</h3></div>
<div><h3>區塊 2</h3></div>
<div><h3>區塊 3</h3></div>
<div><h3>區塊 4</h3></div>
<div><h3>區塊 5</h3></div>
<div><h3>區塊 6</h3></div>
<div><h3>區塊 7</h3></div>
<div><h3>區塊 8</h3></div>
<div><h3>區塊 9</h3></div>
<div><h3>區塊 10</h3></div>
<div><h3>區塊 11</h3></div>
<div><h3>區塊 12</h3></div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    padding: 5px;
    margin: 10px;
    background: #fc0;
    content-visibility: auto;
    contain-intrinsic-size: auto 1000px; /* 假設內容高度為 1000px */
  }
  h3 {height: 100px;}  /* 內容渲染後實際高度 */
</style>

opacity 透明度

opacity 樣式屬性可以設定元素的「透明度」，屬性值為 0～1 的浮點數，數值越大越不透明，0 表示全透明，具有繼承的特性，如果父元素設定了透明度，子元素也會一起變成透明，這個樣式屬性和 CSS 的透明度函式「filter:opacity()」用法大同小異，差別只在於函式的透明度是「參數」，而樣式的透明度是「屬性值」。

下方範例使用 opacity 和 filter:opacity() 兩種方法修改元素的透明度，呈現的效果完全相同。

線上展示：https://codepen.io/oxxo/pen/dyBQGrp

<!-- HTML 程式碼 -->
<div class="a">
  <span>使用樣式 opacity:0.5</span>
  <div>
    <div>apple</div>
    <div>oxxo.studio</div>
  </div>
</div>
<div class="b">
  <span>使用濾鏡 filter:opacity(0.5)</span>
  <div>
    <div>apple</div>
    <div>oxxo.studio</div>
  </div>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    padding: 5px;
    margin: 10px;
    background: orange;
  }
  .a {opacity: 0.5;}
  .b {filter: opacity(0.5);}
</style>

小結

visibility 樣式屬性使用時只需注意 collapse 有其對應元素，以及 hidden 隱藏的元素仍然會佔據空間，至於 opacity 就更簡單，只需要利用 0～1 的浮點數控制透明度，兩個都是非常容易上手的樣式屬性。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～