技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營

贊助商

分類目錄

贊助商

最新文章

搜索

CSS隱藏元素的10種方法之：opacity和filter: opacity()

作者:admin    時(shí)間:2022-10-29 10:39:57    瀏覽:

本文介紹CSS如何使用 opacity 和 filter: opacity() 屬性隱藏元素。

opacity: N 和 filter: opacity(N) 屬性可以傳遞一個(gè)介于 0 和 1 之間的數(shù)字，或介于 0% 和 100% 之間的百分比，表示相應(yīng)地完全透明和完全不透明。

實(shí)例

demodownload

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">

<style>
/* 隱藏元素 */
.hide:hover .hide-item,
.hide:focus .hide-item {
  opacity: 0;
/*
  alternatively:
  opacity: 0%;
  filter: opacity(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;
}
</style>

</head>

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

<p>把鼠標(biāo)移到任何盒子上<br>隱藏使用 <code>opacity: 0;</code> 的第二個(gè)盒子</p>

</body>

</html>

介紹 

在現(xiàn)代瀏覽器中兩者之間幾乎沒有實(shí)際區(qū)別，但如果同時(shí)應(yīng)用多種效果（模糊、對比度、灰度等），則應(yīng)該使用 filter。Opacity 可以設(shè)置動(dòng)畫并提供出色的性能，但請注意頁面上保留完全透明的元素并可能觸發(fā)事件。 

filter:opacity() 似乎是更成熟的不透明度屬性；不同的是，使用 filter:opacity()，一些瀏覽器提供硬件加速以獲得更好的性能。不允許使用負(fù)值。

filter:opacity() 應(yīng)用透明度，值為 0% 是完全透明的；值為 100% 時(shí)，輸入保持不變。0% 和 100% 之間的值在效果上是線性乘數(shù)，這相當(dāng)于將輸入圖像樣本乘以量。如果缺少“amount”參數(shù)，則使用100%的值。

度量標(biāo)準(zhǔn) 影響
瀏覽器支持 良好，但I(xiàn)E僅支持0到1的不透明度
可用性 如果設(shè)置了0或0%，則無法讀取內(nèi)容
布局影響 不
渲染要求 合成
性能 最佳，可以使用硬件加速
動(dòng)畫幀是否可能？ 是
隱藏時(shí)觸發(fā)事件？ 是

相關(guān)文章

標(biāo)簽: opacity  css  CSS隱藏元素  
x
  • 站長推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */