CSS opacity() 语法
在 CSS 中，opacity() 函数一般作为 filter 属性的值，用于改变元素的透明度。
语法：
filter: opacity(amount);说明：
amount 取值可以是以下 2 种。
- 数字：取值范围为 0 到 1。0 表示完全透明，1 表示完全不透明。
- 百分比：取值范围为 0% 到 100%。0% 表示完全透明，100% 表示完全不透明。
opacity() 函数与 opacity 属性功能是非常相似的，它们之间的区别在于：filter: opacity() 可以与其他滤镜（如模糊）结合使用，享受硬件加速优化；而 opacity 属性是独立的。
CSS opacity() 摘要
| 属于 | CSS 滤镜 |
|---|---|
| 使用频率 | 中 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS opacity() 示例
接下来，我们通过几个简单的例子来讲解一下 CSS opacity() 函数是如何使用的。
示例 1：opacity() 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h1 {
width: 200px;
height: 100px;
background-color: lightskyblue;
filter: opacity(0.6);
}
</style>
</head>
<body>
<h1>绿叶网</h1>
</body>
</html>页面效果如下图所示。
分析：
filter: opacity(0.6) 表示将 div 元素的透明度设置为 60%，此时背景和内容会呈现半透明效果。相比于 opacity 属性，filter: opacity() 只会影响视觉渲染，而不会影响元素的交互性。
示例 2：opacity() 结合 CSS 过渡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h1 {
width: 200px;
height: 100px;
background-color: hotpink;
filter: opacity(1);
transition: filter 0.5s ease;
}
h1:hover {
filter: opacity(0.3);
}
</style>
</head>
<body>
<h1>绿叶网</h1>
</body>
</html>默认情况下，页面效果如下图 1 所示。当鼠标移到 h1 元素上时，页面效果如下图 2 所示。
分析：
在这个例子中，我们首先使用 filter: opacity(1); 来设置 h1 元素初始状态为 “完全不透明”，然后在 hover 状态中使用 filter: opacity(0.3) 将透明度降低到 30%。
注意: 不管是 opacity 属性，还是 opacity() 函数，它们不仅会作用于元素的背景颜色，还会作用于内部所有子元素以及文本内容。如果希望只作用于背景颜色，而不会影响内部其他内容，此时应该使用 rgba() 颜色值。
示例 3：opacity() 结合其他滤镜
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h1 {
width: 200px;
height: 100px;
background-color: lightskyblue;
filter: opacity(0.7) grayscale(50%);
}
</style>
</head>
<body>
<h1>绿叶网</h1>
</body>
</html>页面效果如下图所示。
分析：
filter: opacity(0.7) grayscale(50%) 表示同时应用了 70% 的透明度和 50% 的灰度效果。我们将 opacity() 与其他滤镜函数结合使用，可以创建复杂的视觉效果。
