在CSS3中,使用sepia()方法用来实现复古滤镜效果。复古滤镜,也叫褐色滤镜。
语法:
filter: sepia(百分比)
说明:
sepia()方法的取值是一个百分比,取值范围为0%~100%。其中,0%表示没有转换,100%表示复古效果。
举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#after
{
filter:sepia(100%);
}
</style>
</head>
<body>
<div id="before">
<img src="img/princess.png" alt="">
</div>
<div id="after">
<img src="img/princess.png" alt="">
</div>
</body>
</html>
浏览器预览效果如所示。
请不要重复点赞喔