卡卡網(wǎng)

在前面文章介紹了我們可以通過(guò)opacity和filter: opacity()隱藏元素，本文將繼續(xù)介紹另一種CSS隱藏元素的方法：color Alpha 透明度。

使用color Alpha 透明度

前面文章提到的CSS opacity 屬性，它會(huì)影響整個(gè)元素，但也可以分別設(shè)置color、background-color和border-color屬性。使用 rgba(0,0,0,0) 應(yīng)用一個(gè) 0 Alpha 通道，使項(xiàng)目完全透明。

效果

demodownload

HTML

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

<p>鼠標(biāo)移到任何一個(gè)盒子上隱藏盒子two，<br>使用 <code>color</code> 和 <code>background-color</code> 透明度，<br><font color=red>點(diǎn)擊盒子two</font>：隱藏項(xiàng)目仍然會(huì)觸發(fā)事件。</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('隱藏項(xiàng)目仍然會(huì)觸發(fā)事件'));

每個(gè)屬性都可以單獨(dú)設(shè)置動(dòng)畫(huà)以創(chuàng)建有趣的效果。請(qǐng)注意，透明度不能應(yīng)用于具有圖像背景的元素，除非它們是使用linear-gradient或類似方法生成的。

Alpha 通道可以設(shè)置為：

• transparent：完全透明（中間動(dòng)畫(huà)是不可能的）
• rgba(r, g, b, a)：紅色、綠色、藍(lán)色和 alpha
• hsla(h, s, l, a)：色相、飽和度、亮度和 alpha
• #RRGGBBAA 和 #RGBA

Alpha（Alpha通道）

顏色以數(shù)字形式表示為一組數(shù)字，每個(gè)數(shù)字代表顏色給定分量的強(qiáng)度或強(qiáng)度級(jí)別。這些組件中的每一個(gè)都稱為一個(gè)通道。在典型的圖像文件中，顏色通道描述了使用多少紅色、綠色和藍(lán)色來(lái)構(gòu)成最終顏色。為了表示在某種程度上可以看到背景的顏色，在顏色中添加了第四個(gè)通道：alpha 通道。Alpha 通道指定顏色的不透明程度。

例如，顏色#8921F2（也描述為rgb(137, 33, 242)或hsl(270, 89%, 54)）是一種很好的紫色陰影。在下面，你會(huì)在左上角看到一個(gè)該顏色的小框，以及一個(gè)顏色相同但 Alpha 通道設(shè)置為 0.5（50% 不透明度）的框。這兩個(gè)框被繪制在一段文本的頂部。 

如你所見(jiàn)，沒(méi)有 alpha 通道的顏色完全阻擋了背景文本，而帶有 alpha 通道的框通過(guò)紫色背景顏色使其可見(jiàn)。

相關(guān)文章

• 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()

標(biāo)簽: css  CSS隱藏元素  background-color  color