元素可見性 visibility、透明度 opacity

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

快速導覽：

• visibility 撰寫語法
  • 屬性值 visible 和 hidden
  • 屬性值 collapse
• 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>

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 的浮點數控制透明度，兩個都是非常容易上手的樣式屬性。

意見回饋

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