CSS滤镜和CSS精灵

一、CSS3的滤镜(Filters)

CSS3滤镜是对图像等图形元素执行视觉效果操作，如模糊，平衡对比度或亮度，色彩饱和度等。
可以使用CSS3 filter属性将滤镜效果应用于元素，该属性按提供的顺序接受一个或多个滤镜功能。主要适用于不熟练掌握Photoshop技术的人员。

警告：任何版本的Internet Explorer当前均不支持CSS3滤镜效果。较旧的IE版本支持非标准filter属性来创建诸如不透明度之类的效果，但是该功能已被弃用。

1、模糊效果

像高斯模糊效果这样的Photoshop可以使用该blur()功能应用于元素。此函数接受CSS长度值作为定义模糊半径的参数。较大的值将产生更多的模糊。如果未提供参数，则使用值0。
代码演示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS3滤镜</title>
</head>
<style>img{filter: blur(5px);}
</style>
<body><img src="./8.png" alt="">
</body>
</html>

如图：

2、设置图像亮度

brightness()功能可用于设置图像的亮度。值0%将创建全黑的图像。而值100%或1使图像不变。还可以将亮度设置为高于100％，这样可以使图像更亮。如果未提供参数，则使用值1。不允许使用负值。
代码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS3滤镜</title>
</head>
<style>img{filter: brightness(200%);}
</style>
<body><img src="./8.png" alt="">
</body>
</html>

如图：

注意：75%接受以百分号表示的值（例如）的过滤器函数也接受以十进制表示的值（如0.75）。如果该值无效，该函数将返回none并且将不应用任何滤镜效果。

3、调整图像对比度

contrast()功能用于调整图像的对比度。值0%将创建全黑的图像。而值100%或1保持图像不变。还允许超过100％的值，从而提供对比度较低的结果。如果未提供参数，则使用值1。
代码演示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS3滤镜</title>
</head>
<style>img{filter: contrast(30%);}
</style>
<body><img src="./8.png" alt="">
</body>
</html>

4、向图像添加阴影

可以使用该drop-shadow()功能将阴影效果应用于Photoshop等图像。此功能类似于该box-shadow属性。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS3滤镜</title>
</head>
<style>img{border-radius: 50%;filter: drop-shadow(10px 10px 10px red);}
</style>
<body><img src="./8.png" alt="">
</body>
</html>

如图：

注意：drop-shadow()函数的第一个和第二个参数分别指定阴影的水平和垂直偏移，而第三个参数指定模糊半径，最后一个参数指定阴影颜色，就像该box-shadow属性一样，但有一个例外，’ inset’不允许使用关键字。

5、将图像转换为灰度

使用grayscale()功能可以将图像转换为灰度。值100%完全是灰度。值0%保留图像不变。如果未提供参数，则使用值0。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS3滤镜</title>
</head>
<style>img{filter: grayscale(100%);}
</style>
<body><img src="./8.png" alt="">
</body>
</html>

如下图：

6、反转效果

可以使用invert()函数将像Photoshop这样的反转效果应用于图像。 100％或1的值被完全反转。值为0％会使输入保持不变。 0％到100％之间的值是效果的线性乘数。如果未提供参数，则使用值0。不允许使用负值。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS3滤镜</title>
</head>
<style>img{filter: invert(70%);}
</style>
<body><img src="./8.png" alt="">
</body>
</html>

如图：

7、对图像应用不透明度

opacity()功能可用于为图像添加透明度。值0%是完全透明的。100%或1保持图像不变。如果未提供参数，则使用值1。此功能类似于该opacity属性。

代码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS3滤镜</title>
</head>
<style>img{filter: opacity(40%);}
</style>
<body><img src="./8.png" alt="">
</body>
</html>

如图：

8、将棕褐色效果应用于图像

sepia()功能将图像转换为棕褐色。值100%或者1完全是深褐色。值0%保留图像不变。如果缺少参数，则使用值0。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS3滤镜</title>
</head>
<style>img{filter: sepia(100%);}
</style>
<body><img src="./8.png" alt="">
</body>
</html>

9、调整图像的饱和度

saturate()功能可用于调整图像的饱和度。值0%完全不饱和。值是100%保留图像不变。还允许值超过100％，从而提供超饱和结果。如果缺少参数，则使用值1。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS3滤镜</title>
</head>
<style>img{filter: saturate(50%);}
</style>
<body><img src="./8.png" alt="">
</body>
</html>

二、CSS精灵

CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。
　　CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。
　　在网页访问中，客户端每需要访问一张图片都会向服务器发送请求，所以，访问的图片数量越多，请求次数也就越多，造成延迟的可能性也就越大。
所以，CSS Sprites技术加速的关键，并不是降低质量，而是减少个次数，当然随之而来的增加内存消耗，CSS Sprites图片繁琐的合成等缺点在网站性能的提升前，也就不足为道了。