十5、css3 Filter--濾鏡

如何實現下圖的效果-—這裏就用到了濾鏡

給灰色彈框這個標籤元素加「僞類」以下：

#nearStoreContent .popChoose li:before {
  1.     z-index: 1;
  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;
}

下面說說如何使用濾鏡

一、什麼是濾鏡：

一個使用CSS來改變圖片和HTML的模糊度、亮度、對比度、飽和度等等效果的過濾器。

二、如何使用：

• 使用一個屬性：filter:filter(value)
• 使用多個屬性：filter:filter(value) filter(value) filer(value)……;

三、主要屬性filter

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

• Brightness(亮度)：亮度參數「-1」至「1」，值越大亮度越高。
• saturate(飽和度):半分比，以100%爲中間值
• hue-rotate(色相)：0-360
• contrast(對比度):百分比，以100%爲中間值
• invert(反相)：百分比；0%-100%
• graysacle(灰度)：百分比0%-100%
• sepia(懷舊)：百分比0%-100%