CSS3学习笔记——实现CSS3中的滤镜特效

概述

滤镜特效：指在页面被渲染之后再页面中某个局部呈现的一些特殊的视觉效果。

滤镜起源于SVG，但在SVG与CSS3中使用不同的方式来定义盒使用滤镜。CSS3中使用一个图型来定义滤镜

可以对页面上的任何可视元素使用滤镜特效；

在Chrome、Opera、以及Safari浏览器中在filter样式属性前添加"-webkit"浏览器供应商前缀；

1.grayscale滤镜（灰度滤镜）

作用：将彩色图像转换为灰度图像。

grayscale（百分比/浮点数）

100%时为黑白图像； 0%时仍为彩色图像

<style>
div{
    display:flex;
    flex-direction:row;
}
figure{
    text-align:center;    
}
figure:nth-child(2){
    filter:grayscale(100%);
    -webkit-filter:grayscale(100%);
}
</style>
</head>
<body>
<div>
<figure>
<img src="sl.jpg">
<figcaption>原始图片</figcaption>
</figure>
<figure>
<img src="sl.jpg">
<figcaption>使用灰度滤镜</figcaption>
</figure>
</div>

2.sepla滤镜

作用：为彩色图像添加一层棕褐色色调，使其呈现出老照片的效果；

sepla(百分比/浮点数)

0% 表示不做修改 100% 黑白老照片的效果

/**修改上面例子中的样例代码**/
figure:nth-child(2){
   filter:sepla(100%);
   -webkit-filter:sepla(100%);
}

3.saturate滤镜（饱和度滤镜）

作用：增强彩色图片饱和度，使其色彩变得更加鲜明，呈现海报或卡通的效果；

saturate（百分比）

大于100%的表示增强饱和度小于100%的表示削弱饱和度；

/**修改上面例子中的样例代码**/
figure:nth-child(2){
   filter:saturate(250%);
   -webkit-filter:saturate(250%);
}

4.hue-rotate滤镜

hue-rotate（角度值）

/**修改上面例子中的样例代码**/
figure:nth-child(2){
   filter:hue-roate(90deg);
   -webkit-filter:hue-rotate(90deg);
}

5.invert滤镜（颜色翻转滤镜）

作用：将图像颜色翻转；

invert（百分比）

100%时相当于为一幅照片进行反相处理；

/**修改上面例子中的样例代码**/
figure:nth-child(2){
   filter:invert(100%);
   -webkit-filter:invert(100%);
}

6.opacity滤镜（透明度滤镜）

作用：为图像产生透明或半透明效果

opacity（百分比）

0%时为完全透明 100%时为完全不透明

/**修改上面例子中的样例代码**/
figure:nth-child(2){
   filter:opacity(50%);
   -webkit-filter:opacity(50%);
}

7.contrast滤镜（对比度滤镜）

作用：可以在全黑与原图像亮度之间调整图像的对比度。

contrast(百分比)

100%时为原图像对比度； 0%时为全黑效果 200%时为原图像对比度的2倍；

/**修改上面例子中的样例代码**/
figure:nth-child(2){
   filter:contrast(200%);
   -webkit-filter:contrast(200%);
}

8.blur滤镜（模糊滤镜）

作用：类似于在图像上添加一层玻璃遮罩，是图像具有一种烟雾效果。

blur（像素值）

为0时不发生变化

/**修改上面例子中的样例代码**/
figure:nth-child(2){
   filter:blur(2px);
   -webkit-filter:blur(2px);
}

9.drop-shadow滤镜（阴影滤镜）

作用：给图像添加一层阴影效果；

drop-shadow（阴影横向偏离距离纵向偏离距离模糊半径阴影颜色）

/**修改上面例子中的样例代码**/
figure:nth-child(2){
   filter:drop-shadow(4px -4px 6px green);
   -webkit-filter:drop-shadow(4px -4px 6px green);
}