CSS invert() 函数

CSS invert() 语法

在 CSS 中，invert() 函数一般作为 filter 属性的值，用于反转元素的颜色。

语法：

filter: invert(percentage);

说明：

percentage 是一个百分比值（0% ~ 100%），或者数字（0 ~ 1）：

0%（或 0）：表示无反转，保持原始颜色。
100%（或 1）：表示完全反转，生成补色。
中间值（如 50%）：部分反转。

invert() 的反转操作是基于 RGB 颜色模型的，它的计算方式如下：

新颜色 = 255 - 原始颜色值

举个简单例子，红色（255, 0, 0）反转后变为青色（0, 255, 255）。

此外对于 invert() 函数，小伙伴们还要清楚以下几点：

invert() 会反转元素中所有可见颜色，包括图像、背景、边框、文本等。
invert() 可以与其他 filter 函数（如 brightness()、contrast()）搭配一起使用。
invert() 经常结合 CSS 动画和 CSS过渡，来实现动态视觉效果。

注意: 当使用 invert() 时，透明区域是不会被反转的。

CSS invert() 摘要

属于	CSS 滤镜
使用频率	中
兼容性	查看
官方文档	查看
MDN	查看

CSS invert() 示例

接下来，我们通过几个简单的例子来讲解一下 CSS invert() 函数是如何使用的。

示例 1：invert() 反转颜色

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: lightskyblue;
            filter: invert(100%);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

页面效果如下图所示。

invert() 实现颜色反转

分析：

filter: invert(100%) 表示将 div 元素的背景色完全反转。其中，lightskyblue（rgb(135, 206, 250)）会变为 rgb(120, 49, 5)。

示例 2：invert() 结合 CSS 过渡

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: hotpink;
            filter: invert(0%);
            transition: filter 0.3s ease;
        }
        div:hover {
            filter: invert(100%);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

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

invert() 结合过渡动画 1

invert() 结合过渡动画 2

分析：

在这个例子中，我们使用 transition 属性定义了一个过渡效果。当鼠标移到 div 元素上时，它的背景颜色会平滑地从无反转（0%）过渡到完全反转（100%）。

示例 3：invert() 应用于图片

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        img {
            filter: invert(100%);
        }
    </style>
</head>
<body>
    <img src="imgs/bird.jpg" alt="">
</body>
</html>

页面效果如下图所示。

invert() 应用于图像

分析：

filter: invert(100%) 表示将图片的颜色完全反转，这样会生成类似底片的效果。