CSS隐藏元素的10种方法之：opacity和filter: opacity()
作者:admin 时间:2022-10-29 10:39:57 浏览:本文介绍CSS如何使用 opacity 和 filter: opacity() 属性隐藏元素。
opacity: N 和 filter: opacity(N) 属性可以传递一个介于 0 和 1 之间的数字，或介于 0% 和 100% 之间的百分比，表示相应地完全透明和完全不透明。
实例
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>
介绍
在现代浏览器中两者之间几乎没有实际区别，但如果同时应用多种效果（模糊、对比度、灰度等），则应该使用 filter。Opacity 可以设置动画并提供出色的性能，但请注意页面上保留完全透明的元素并可能触发事件。
filter:opacity() 似乎是更成熟的不透明度属性；不同的是，使用 filter:opacity()，一些浏览器提供硬件加速以获得更好的性能。不允许使用负值。
filter:opacity() 应用透明度，值为 0% 是完全透明的；值为 100% 时，输入保持不变。0% 和 100% 之间的值在效果上是线性乘数，这相当于将输入图像样本乘以量。如果缺少“amount”参数，则使用100%的值。
| 度量标准 | 影响 |
|---|---|
| 浏览器支持 | 良好，但IE仅支持0到1的不透明度 |
| 可用性 | 如果设置了0或0%，则无法读取内容 |
| 布局影响 | 不 |
| 渲染要求 | 合成 |
| 性能 | 最佳，可以使用硬件加速 |
| 动画帧是否可能？ | 是 |
| 隐藏时触发事件？ | 是 |
相关文章
相关文章
x
- 站长推荐
