CSS3 滤镜 webkit-filter详细介绍及使用方法

什么是CSS3滤镜

CSS3滤镜功能可以使元素在渲染前或渲染后对内容进行图形效果处理，从而增强网页设计的创意性和美观性，提高用户体验。滤镜可以通过修改元素的外观，改变其色彩，模糊程度和透视感，又称显式滤镜。CSS3中提供了很多种滤镜效果，其中webkit-filter是其中之一。

webkit-filter的用法

webkit-filter语法如下：

selector{
  -webkit-filter: filter-function(value);
}

其中selector为需要应用滤镜的元素，filter-function是滤镜函数名，value是滤镜函数的值。滤镜函数可以单独使用，也可以进行组合使用。

webkit-filter的常用函数

1. blur()

模糊函数，用于模糊一个元素的内容，值可以是像素或百分比，值越大越模糊。

示例：

.box{
  -webkit-filter: blur(5px);
}

2. grayscale()

灰度函数，用于将元素转换为灰度图像，值是一个百分比，值越大越灰。

示例：

.box{
  -webkit-filter: grayscale(50%);
}

3. sepia()

深褐色函数，如同旧时的照片，值是一个百分比，值越大越浅。

示例：

.box{
  -webkit-filter: sepia(50%);
}

4. saturate()

饱和度函数，用于增加或减少一种颜色的饱和度，0%为灰色，100%则为完全饱和度。

示例：

.box{
  -webkit-filter: saturate(150%);
}

5. hue-rotate()

色相函数，将颜色的色相值从当前值按照角度值进行改变。

.box{
  -webkit-filter: hue-rotate(90deg);
}

6. brightness()

亮度函数，增加或减少元素的亮度，值为0到1时是减少亮度，值大于1时增加亮度。

示例：

.box{
  -webkit-filter: brightness(0.5);
}

7. contrast()

对比度函数，增加或减少元素的对比度，值为0时，元素为完全灰色。

示例：

.box{
  -webkit-filter: contrast(150%);
}

webkit-filter的组合使用

webkit-filter允许对多个滤镜函数进行组合，滤镜函数的顺序影响滤镜效果。组合使用时，使用空格分隔。

示例：

.box{
  -webkit-filter: grayscale(50%) blur(2px) contrast(150%);
}

以上代码将对一个类名为.box的元素进行组合滤镜操作，首先将其转化为灰度图像，然后模糊2像素，并且提高其对比度。

使用实例

实例1：图片鼠标悬停效果

HTML代码：

<div class="img-wrap">
  <img src="pic.jpg" alt="pic" class="pic">
</div>

CSS代码：

.img-wrap{
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.pic{
  display: block;
  width: 100%;
  height: 100%;
  transition: all 0.3s;
}

.pic:hover{
  -webkit-filter: grayscale(100%);
}

Image：在鼠标悬停时，将原彩色图像转化为灰度图像，从而产生鼠标悬停特效。

实例2：元素背景图像滤镜

HTML代码：

<div class="box">
  <p>元素背景图像滤镜</p>
</div>

CSS代码：

.box{
  width: 300px;
  height: 200px;
  background-image: url(picture.jpg);
  background-size: cover;
  text-align: center;
  line-height: 200px;
}

.box p{
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  -webkit-filter: blur(3px) brightness(0.9) contrast(150%);
}

Image：此代码块将会产生一个背景图像为"picture.jpg"的容器，同时给容器内的文字添加滤镜效果，模糊3像素，降低亮度，增加对比度，提高可读性。

总结

CSS3滤镜为设计师提供了更多的操作空间，可以轻松地通过webkit-filter语法调整元素的视觉效果，使网页的设计更有创造性，更加精美。需要注意的是，非webkit私有前缀的滤镜属性会被部分浏览器忽略，因此需要在CSS代码中加入兼容性属性。