卡卡网

在前面文章介绍了我们可以通过opacity和filter: opacity()隐藏元素，本文将继续介绍另一种CSS隐藏元素的方法：color Alpha 透明度。

使用color Alpha 透明度

前面文章提到的CSS opacity 属性，它会影响整个元素，但也可以分别设置color、background-color和border-color属性。使用 rgba(0,0,0,0) 应用一个 0 Alpha 通道，使项目完全透明。

效果

demodownload

HTML

<ol class="hide" tabindex="0">
  <li>one</li>
  <li class="hide-item">two</li>
  <li>three</li>
</ol>

<p>鼠标移到任何一个盒子上隐藏盒子two，<br>使用 <code>color</code> 和 <code>background-color</code> 透明度，<br><font color=red>点击盒子two</font>：隐藏项目仍然会触发事件。</p>

CSS

/* 隐藏元素 */
.hide:hover .hide-item,
.hide:focus .hide-item {
  color: rgba(0,0,0,0);
  background-color: rgba(0,0,0,0);
}

/* 其他样式 */
body {
  font-family: sans-serif;
  font-size: 100%;
  color: #222;
  background-color: #fff;
}

p {
  text-align: center;
}

.hide {
  display: flex;
  justify-content: center;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.hide > * {
  flex: 0 0 25%;
  font-size: 2em;
  text-align: center;
  padding: 1em 0;
  margin: 0.2em;
  background-color: #ccc;
  border-radius: 0.5em;
  user-select: none;
}

.hide-item {
  background-color: #f66;
  cursor: pointer;
}

JavaScript

该JS非必要代码，仅为演示效果使用。

document.querySelector('.hide-item').addEventListener('click', () => alert('隐藏项目仍然会触发事件'));

每个属性都可以单独设置动画以创建有趣的效果。请注意，透明度不能应用于具有图像背景的元素，除非它们是使用linear-gradient或类似方法生成的。

Alpha 通道可以设置为：

• transparent：完全透明（中间动画是不可能的）
• rgba(r, g, b, a)：红色、绿色、蓝色和 alpha
• hsla(h, s, l, a)：色相、饱和度、亮度和 alpha
• #RRGGBBAA 和 #RGBA

Alpha（Alpha通道）

颜色以数字形式表示为一组数字，每个数字代表颜色给定分量的强度或强度级别。这些组件中的每一个都称为一个通道。在典型的图像文件中，颜色通道描述了使用多少红色、绿色和蓝色来构成最终颜色。为了表示在某种程度上可以看到背景的颜色，在颜色中添加了第四个通道：alpha 通道。Alpha 通道指定颜色的不透明程度。

例如，颜色#8921F2（也描述为rgb(137, 33, 242)或hsl(270, 89%, 54)）是一种很好的紫色阴影。在下面，你会在左上角看到一个该颜色的小框，以及一个颜色相同但 Alpha 通道设置为 0.5（50% 不透明度）的框。这两个框被绘制在一段文本的顶部。 

如你所见，没有 alpha 通道的颜色完全阻挡了背景文本，而带有 alpha 通道的框通过紫色背景颜色使其可见。

相关文章

• CSS隐藏元素的10种方法之：缩小尺寸
• CSS隐藏元素的10种方法之：使用::after伪元素
• CSS隐藏元素的10种方法之：使用position属性
• CSS隐藏元素的10种方法之：使用display
• CSS隐藏元素的10种方法之：使用visibility
• CSS隐藏元素的10种方法之：使用clip-path
• CSS隐藏元素的10种方法之：使用transform
• CSS隐藏元素的10种方法之：color Alpha 透明度
• CSS隐藏元素的10种方法之：opacity和filter: opacity()

标签: css  CSS隐藏元素  background-color  color