CSS滤镜、CSS精灵技术

目录

CSS滤镜 

CSS精灵技术

---

CSS滤镜 

1、滤镜：对图像、图像进行的视觉处理(模糊、饱和度、对比度等)
2、滤镜的实现：filter属性
3、常用的滤镜函数：
(1)模糊效果：blur(number),number越大图像越模糊

#img1{
        /* -webkit-filter: blur(2px); */
        filter: blur(5px); /*模糊半径为5px*/
        border-radius: 50%;
    }

(2)设置图像的亮度：brightness(number)，number越大图像越亮,number不能取负值。可以是整数也可以是百分比 

#img2{
        filter: brightness(0.5); /*图像的亮度：取值可以是非负的整数或小数，也可以是百分比*/
    }

(3)图像的对比度：contrast(number)

#img3{
        filter: contrast(50%); /*图像的对边度：取值可以是非负的整数或小数，也可以是百分比*/
    }

(4)阴影效果：drop-shadow(args1 args2 args3 args4)，作用类似CSS中的box-shadow属性 

        args1：阴影水平偏移量
        args2：阴影的垂直偏移量
        args3：阴影的模糊半径
        args4：阴影的颜色

(5)图像的灰度转换：grayscale(number) 

 #img5{
        filter: grayscale(100%);
    }

 (6)图像反转：invert()

#img6{
        filter: invert(100%);
    }

(7)图像的不透明度：opacity()

#img7{
        filter: opacity(80%);
    }

(8)图像转换为棕褐色：sepia()

 #img8{
        filter: sepia(100%);
    }

(10)图像的饱和度：saturate() 

#img9{
        filter: saturate(200%);
    }

CSS精灵技术

        在制作网页的过程中我们会用很多个细碎的小图，每当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。由于网页中细碎的小图片很多，会导致向服务器发送很多次请求，这样不仅降低了页面的加载速度，也会影响服务器的效率。
        CSS背景精灵技术（CSS Srites 或 CSS雪碧），是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都放到一张大图中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。使用CSS精灵技术可以有效地减少服务器接收和发送请求的次数，提高页面的加载速度。

优点：

1.能减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

2.CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

3.解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。

4.更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

缺点：

1. 在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；

2.CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css。

制作精灵图遵循原则 

1. 精灵图上放的都是小的装饰性质的背景图片，插入图片不能往上放
2. 精灵图的宽度取决于最宽的那个背景
3. 可以横向摆放也可以纵向

实例： 

<style>
    .box1{
		height: 100px;
		width:300px;
		border: 1px solid black;
		background: url(../../10-03/imgs/1.png) -276px 0 no-repeat;
	}
	.box2{
		height: 100px;
		width:300px;
		border: 1px solid black;
		background: url(../../10-03/imgs/1.png) 0 0 no-repeat;
	}
	.box3{
		height: 100px;
		width:300px;
		border: 1px solid black;
		background: url(../../10-03/imgs/1.png) -551px 0 no-repeat;
</style>

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>