CSS contrast() 函数

CSS contrast() 语法

在 CSS 中，contrast() 函数一般作为 filter 属性的值，来改变元素（比如图片或背景）的对比度。

对比度，指的是图片不同颜色之间的差异程度。增加对比度，可以使图片的亮部更亮、暗部更暗，从而使细节更加突出；降低对比度，则会使图片的颜色差异减小，看起来更加柔和。

语法：

filter: contrast(值);

说明：

调整对比度的值，可以用百分比（如 100%）或无单位数字（如 1）。

100%（或 1）：表示使用原始对比度（无变化）。
大于 100%（或 1）：增加对比度，使亮部更亮、暗部更暗。
小于 100%（或 1）：降低对比度，接近灰色。
0%（或 0）：完全变成单一灰色。

对于 contrast() 函数，小伙伴们还需要清楚以下几点。

contrast() 可以搭配 hue-rotate()、grayscale() 等其他滤镜一起使用。需要注意的是，不同的滤镜顺序，其最终效果也可能会不同。
contrast() 过高的值可能会让图片失真，在使用的时候要特别注意。

CSS contrast() 摘要

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

CSS contrast() 示例

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

示例 1：contrast() 基本用法

运行代码

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

页面效果如下图所示。

contrast() 基本用法

分析：

filter: contrast(150%) 表示将图片的对比度改变为原始的 1.5 倍，这样会使得颜色更加鲜明，亮部和暗部的差异更加明显。

示例 2：contrast() 降低对比度

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-image: url("imgs/bird.jpg");
            background-size: cover;
            filter: contrast(50%);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

页面效果如下图所示。

contrast() 降低对比度

分析：

filter: contrast(50%) 表示将对比度改变为原来的 50%，这样会使得图片更加柔和、趋向于灰色。

示例 3：contrast() 结合其他滤镜函数

运行代码

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

页面效果如下图所示。

contrast() 结合其他滤镜函数

分析：

filter: contrast(120%) brightness(110%);

上面这句代码表示同时使用 contrast() 和 brightness() 这 2 个滤镜函数。其中， contrast() 用于改变对比度，而 brightness() 用于改变亮度。