在上一篇文章中，我们使用通过CSS制作了将彩色图片转换为黑白图片的效果。我们也可以使用同样的方法，将图片转换为深褐色的怀旧风格的图片效果。
在这篇文章中，我们将使用CSS滤镜来实现怀旧风格的图片效果。
HTML结构
在这个例子中，我们将简单的实用一幅图片来作为HTML结构。
<img src="1.jpg" alt="..." class="sepia">
CSS样式
CSS过滤器的sepia属性可以对图片颜色进行过滤，我们这个DOME中将使用这个属性。
img.sepia { -webkit-filter: sepia(1); -webkit-filter: sepia(100%); filter: sepia(100%); }
上面的代码将在Chrome 18+、Firefox 35+、Safari 6+、Opera 15+和所有最新版本的手机浏览器上起作用。如果要兼容旧版本的Firefox浏览器，我们需要使用SVG过滤器来实现。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="old-timey">
<feColorMatrix values="0.14 0.45 0.05 0 0
0.12 0.39 0.04 0 0
0.08 0.28 0.03 0 0
0 0 0 1 0" />
</filter>
</svg>
上面这个过滤器中使用了颜色矩阵，关于它可以参考这篇文章。
将上面的代码保存为一个sepia.svg文件，然后我们就可以在CSS文件中来引用它。
img.sepia{
filter: url(sepia.svg#old-timey);
-webkit-filter: sepia(1);
-webkit-filter: sepia(100%);
filter: sepia(100%);
}
遗憾的是，目前在IE浏览器中没有可用的sepia过滤器，所以我们在IE浏览器中只能为图片制作一个深褐色的背景，并且降低一些图片的透明度，来模拟这种怀旧风格的效果。
img.sepia {
filter: url(sepia.svg#old-timey);
-webkit-filter: sepia(1);
-webkit-filter: sepia(100%);
filter: sepia(100%);
background-color: #5E2612;
filter: alpha(opacity = 50);
zoom:1;
}
到此，这个效果就做好了。有网友在留言中说这些效果可以轻松使用photoshop等图像软件完成，这当然没错，任何效果都可以通过多种方式来实现，我们这里讨论的主要是如何使用CSS在不改变图片的情况下，将这幅图片制作出各种特殊的效果。希望这些内容对你有所帮助。
