CSS sepia() 语法
在 CSS 中，sepia() 函数一般作为 filter 属性的值，用于实现元素的 “复古效果”。使用 sepia() 函数，可以实现 “老照片” 效果。
语法：
filter: sepia(amount);说明：
amount 是一个介于 0 到 1 之间的值（或 0% 到 100%），它表示棕褐色滤镜的强度。
- 0 或 0%：表示无效果，元素保持原始颜色。
- 1 或 100%：表示完全应用棕褐色滤镜，元素呈现强烈的复古色调。
- 介于 0 和 1：表示部分效果。
提示: sepia() 的值大于 1 时会被限制为 1，并且不支持负值。如果设置为负数，则该声明会被浏览器忽略。
CSS sepia() 摘要
| 属于 | CSS 滤镜 |
|---|---|
| 使用频率 | 低 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS sepia() 示例
接下来，我们通过几个简单的例子来讲解一下 CSS sepia() 函数是如何使用的。
示例 1：sepia() 实现复古图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img {
filter: sepia(1);
}
</style>
</head>
<body>
<img src="imgs/bird.jpg" alt="">
</body>
</html>页面效果如下图所示。
分析：
filter: sepia(1) 表示将图片完全转换为棕褐色调，从而显示出强烈的复古效果。sepia() 函数非常适合用于将照片转换成 “复古” 效果。
示例 2：sepia() 实现部分棕褐色效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img {
filter: sepia(0.5);
}
</style>
</head>
<body>
<img src="imgs/bird.jpg" alt="">
</body>
</html>页面效果如下图所示。
分析：
filter: sepia(0.5) 表示使用 50% 的棕褐色滤镜，此时图片会保留部分原始颜色，并同时带有轻微的复古色调。
示例 3：sepia() 结合其他滤镜函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img {
filter: sepia(0.7) brightness(0.8) contrast(1.2);
}
</style>
</head>
<body>
<img src="imgs/bird.jpg" alt="">
</body>
</html>页面效果如下图所示。
分析：
filter: sepia(0.7) brightness(0.8) contrast(1.2);上面代码表示同时使用了 3 种滤镜效果，说明如下：
- sepia(0.7) 表示使用 70% 的棕褐色滤镜。
- brightness(0.8) 表示将亮度变为原来的 80%。
- contrast(1.2) 表示将对比度变为原来的 1.2 倍。
示例 4：sepia() 实现动态滤镜效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img {
filter: sepia(0.3);
transition: filter 0.5s ease;
}
img:hover {
filter: sepia(1);
}
</style>
</head>
<body>
<img src="imgs/bird.jpg" alt="">
</body>
</html>默认情况下，页面效果如下图 1 所示。当鼠标移到 div 元素上时，页面效果如下图 2 所示。
分析：
在这个例子中，我们使用 transition 属性定义了一个过渡效果。鼠标移到图片上时，图片会从 30% 的棕褐色滤镜平滑过渡到 100%，从而实现动态的复古效果。
