可见性与透明度

visibility 和 opacity 样式属性就如同字面的意思，表示元素的可见性和透明度，这篇教学所介绍的样式可以将元素“显示”或“隐藏”，这篇教学会介绍元素可见性 visibility、内容可见性 content-visibility 以及 opacity 透明度的用法。

快速导览：

• visibility 元素可见性
  • 属性值 visible 和 hidden
  • 属性值 collapse
• content-visibility 内容可见性
• opacity 透明度

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

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 的浮点数控制透明度，两个都是非常容易上手的样式属性。

意见反馈