CSS3 -webkit-filter 滤镜

HTML5学堂：在早期网页要实现图片的色相旋转、灰色度的变化，只能用ie的滤镜来实现。直到CSS3出来之后，可以用filter来实现了，接下来详细的了解filter的使用

语法：

1. 选择器 {
2.     filter: none  |  <filter-value> [ <filter-value> ]*
3. }

语法分析:

属性值的归纳

none–默认值

grayscale（value）–灰度，value:0~1;

sepia（value）–褐色，value:0~1;

saturate（value）–饱和度，value:number;

hue-rotate（value）–色相旋转，value:angle;

invert（value）–反色，value:0~1;

opacity（value）–透明度，value:0~1;

brightness（value）–亮度，value:0~1;

contrast（value）–对比度，value:number;

blur（value）–模糊，value:length;

drop-shadow（value）–阴影value:h-shadowv-shadowblur

效果实战练习

我们需要不断的实战帮助我们去加深理解,因此我们需要知道filter是如何使用的

结构代码

1. <div class="h5course">
2.     <img src="h5course.jpg">
3. </div>

样式代码：

1. .h5course {
2.     overflow: hidden;
3.     position: relative;
4.     width: 500px;
5.     height: 500px;
6. }
7. .h5course img {
8.     width: 100%;
9. }
10. .h5course span {
11.     position: absolute;
12.     top: 220px;
13.     width: 100%;
14.     height: 60px;
15.     line-height: 60px;
16.     background: rgba(0,0,0,0.5);
17.     text-align: center;
18.     font-family: "微软雅黑";
19.     font-size: 40px;
20.     font-weight: bold;
21.     color: #fff;
22.     z-index: 2;
23. }

效果如下：

基本结构已经完成，接下来我们来实现以下的几个效果

1. 灰色度 - grayscale

 

样式代码：

1. .h5course img {
2.     width: 100%;
3.     -webkit-filter: grayscale(1);
4. }

效果如下：

咱们可以发现，图片变成灰色了。大家可以改改值，看看有什么变化。

欢迎沟通交流~HTML5学堂

2.复古 - sepia

样式代码：

1. .h5course img {
2.     width: 100%;
3.     -webkit-filter: sepia(1);
4. }

效果如下：

3. 色相旋转 - hue-rotate

样式代码

1. .h5course img {
2.     width: 100%;
3.     -webkit-filter: hue-rotate(30deg);
4. }

效果图如下

咱们修改hue-rotate的角度，可以看到图片的颜色变了。其原理是：按照色相环进行旋转，顺时针方向，红 - 橙 - 黄 - 黄绿 - 绿 - 蓝绿 - 蓝 - 蓝紫 - 紫 - 紫红 - 红）此处为叠加黄色滤镜。

欢迎沟通交流~HTML5学堂

4. 阴影 - drop-shadow

代码样式

1. .h5course {
2.     padding: 5%;
3. }
4. .h5course img {
5.     width: 100%;
6.     -webkit-filter: drop-shadow(5px 5px 5px #ccc);
7. }

效果如下

其实图片阴影和盒阴影是一样的，只是drop-shadow给图片加的。

5. 自定义效果

样式代码

1. .h5course img {
2.     width: 100%;
3.     -webkit-filter: saturate(5) hue-rotate(500deg) grayscale(0.3) sepia(0.7) contrast(1.5) invert(0.2) brightness(.9);
4. }

效果如下

如上图所示，我们可以知道filter是可以设置多个值的，每个值以空格隔开。

兼容性：

目前来说，兼容这个属性的浏览器很少，只有webkit内核浏览器支持，因此在移动端上使用会比较广泛

欢迎沟通交流~HTML5学堂