十五、css3 Filter--滤镜

如何实现下图的效果-—这里就用到了滤镜

给灰色弹框这个标签元素加“伪类”如下：

#nearStoreContent .popChoose li:before {

  1.     z-index:;

  2.     position: absolute;

  3.     content: "123131";

  4.     font-size: 18px;

  5.     color: #000;

  6.     -webkit-filter: blur(4px);

  7.     filter: blur(4px);

  8.     display: block;

  9.     width: 100%;

  10.     text-align: center;

  11.     height: 20px;

  12.     line-height: 20px;

  13.     top: 50%;

  14.     margin-top: -10px;

}

下面说说如何使用滤镜

1、什么是滤镜：

一个使用CSS来改变图片和HTML的模糊度、亮度、对比度、饱和度等等效果的过滤器。

2、如何使用：

使用一个属性：filter:filter(value)
使用多个属性：filter:filter(value) filter(value) filer(value)……;

3、主要属性filter

blur(模糊)：单位：px/em/pt 最常用，上面的例子也用到了

十五、css3 Filter--滤镜

Brightness(亮度)：亮度参数“-1”至“1”，值越大亮度越高。
saturate(饱和度):半分比，以100%为中间值
hue-rotate(色相)：0-360
contrast(对比度):百分比，以100%为中间值
invert(反相)：百分比；0%-100%
graysacle(灰度)：百分比0%-100%
sepia(怀旧)：百分比0%-100%

秒客网

十五、css3 Filter--滤镜

相关文章