CSS opacity 属性

CSS opacity 语法

在 CSS 中，opacity 属性用于设置一个元素的 “不透明度” 。需要特别注意，它控制的是 “不透明度”，也就是说：

1 表示完全不透明（默认值）。
0 表示完全透明（看不见）。

语法：

opacity: 数值;

说明：

opacity 属性取值是一个数值，取值范围为 0.0~1.0。其中 0.0 表示完全透明，1.0 表示完全不透明。此外在现代浏览器中，也可以使用百分比表示，例如 opacity: 50% 等同于 opacity: 0.5。

比如下面代码会让所有图片变成 50% 透明，看起来像蒙了一层 “玻璃”。

/* 半透明的图片 */
img {
    opacity: 0.5;
}

此外，小伙伴们还需要注意以下几点。

opacity 会影响整个元素及其所有子元素，包括文字、背景、边框等。
设置透明度会创建一个新的 “堆叠上下文（stacking context）” ，影响层叠顺序（z-index）。
使用 opacity: 0 时，元素虽然不可见，但该元素仍然占据页面布局空间、仍然能接收鼠标事件（点击、悬停等），除非你同时设置 pointer-events: none;。

提示: 如果只是想让背景透明，但文字保留不变，此时不建议使用 opacity，而是建议使用 background-color: rgba(0, 0, 0, 0.5);。这样可以只让背景透明，而不会影响文字和子元素。

CSS opacity 摘要

属于	CSS 文本颜色
使用频率	高
是否继承	否
默认值	1.0
兼容性	查看
官方文档	查看
MDN	查看

CSS opacity 示例

接下来，我们通过几个简单的例子来讲解一下 CSS opacity 属性是如何使用的。

示例 1：opacity 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        img:nth-of-type(1) { opacity: 1.0; }
        img:nth-of-type(2) { opacity: 0.5; }
        img:nth-of-type(3) { opacity: 0.2; }
    </style>
</head>
<body>
    <img src="imgs/bird.jpg" alt="">
    <img src="imgs/bird.jpg" alt="">
    <img src="imgs/bird.jpg" alt="">
</body>
</html>

页面效果如下图所示。

opacity 基本用法

示例 2：定义鼠标 hover 时的 opacity

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: #50A3A6;
            color: white;
            border-radius: 5px;
            cursor: pointer;
        }
        div:hover {
            opacity: 0.8;
        }
    </style>
</head>
<body>
    <div>回到首页</div>
</body>
</html>

默认情况下，效果如下图 1 所示。当鼠标移到元素上时，效果如下图 2 所示。

元素默认的opacity

鼠标hover时的opacity

提示: opacity 属性会影响整个元素的透明度，如果你不希望内部的子元素被影响，可以考虑使用 RGBA 颜色。