技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

CSS隐藏元素的10种方法之:opacity和filter: opacity()

作者:admin    时间:2022-10-29 10:39:57    浏览:

本文介绍CSS如何使用 opacityfilter: opacity() 属性隐藏元素。

opacity: Nfilter: opacity(N) 属性可以传递一个介于 0 和 1 之间的数字,或介于 0% 和 100% 之间的百分比,表示相应地完全透明和完全不透明。

实例

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>把鼠标移到任何盒子上<br>隐藏使用 <code>opacity: 0;</code> 的第二个盒子</p>

</body>

</html>

介绍 

在现代浏览器中两者之间几乎没有实际区别,但如果同时应用多种效果(模糊、对比度、灰度等),则应该使用 filterOpacity 可以设置动画并提供出色的性能,但请注意页面上保留完全透明的元素并可能触发事件。 

filter:opacity() 似乎是更成熟的不透明度属性;不同的是,使用 filter:opacity(),一些浏览器提供硬件加速以获得更好的性能。不允许使用负值。

filter:opacity() 应用透明度,值为 0% 是完全透明的;值为 100% 时,输入保持不变。0% 和 100% 之间的值在效果上是线性乘数,这相当于将输入图像样本乘以量。如果缺少“amount”参数,则使用100%的值。

度量标准 影响
浏览器支持 良好,但IE仅支持0到1的不透明度
可用性 如果设置了0或0%,则无法读取内容
布局影响
渲染要求 合成
性能 最佳,可以使用硬件加速
动画帧是否可能?
隐藏时触发事件?

相关文章

标签: opacity  css  CSS隐藏元素  
x
  • 站长推荐