31、CSS3 滤镜

  • grayscale 灰度
    filter: grayscale(0.5);
    参数值在0至1之间。
    例：彩色黑白的过渡
    img { transition: filter 2s; }
    img:hover { filter: grayscale(1); }

  • brightness 亮度
    filter: brightness(5);

  • contrast 对比度
    filter: contrast(1.5);

  • saturate 饱和度
    filter: saturate(1.5);

  • hue-rotate 色相旋转
    filter: hue-rotate(60deg);

  • opacity 透明度：常用
    filter: opacity(0.4);

  • blur 模糊
    filter: blur(2px);

  • invert 反转颜色
    filter: invert(1);

  • sepia 棕褐色
    filter: sepia(1);
    棕褐色一般用于照片，显示像旧照片

  • drop-shadow 阴影
    filter: drop-shadow(5px 5px 8px #333);

例：

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>无标题文档</title>
<style>
body { text-align: center; font-size: 9pt;}
div { float: left; }
@keyframes adjustHue {
    0% { filter: hue-rotate(20deg); }
    30% { filter: hue-rotate(50deg); }
    70% { filter: hue-rotate(70deg); }
    100% { filter: hue-rotate(90deg); }
}
img { width: 190px; height: 190px; }
#img2 { filter: grayscale(0.7); }
#img3 { filter: saturate(1.5); }
#img4 { filter: brightness(4); }
#img5 { filter: contrast(1.5); }
#img6 { filter: hue-rotate(60deg); }
#img7 { filter: opacity(0.6); }
#img8 { filter: sepia(1); }
#img9 { filter: invert(1); }
#img10 { filter: blur(2px); }
#img11 { filter: drop-shadow(5px 5px 8px #333); }
#img12 { animation: adjustHue 1s alternate infinite; }
#img13 { transition: filter 2s; }
#img13:hover { filter: grayscale(1); }
</style>
</head>
<body>
  <h3>CSS3 滤镜演示，请使用 Google Chrome 19 以上的版本观看</h3>
  <div><img id="img1" src="images/chrome.png"><br>原图</div>
  <div><img id="img2" src="images/chrome.png"><br>灰度 grayscale(0.7)

</div>
  <div><img id="img3" src="images/chrome.png"><br>饱和度 saturate(1.5)

</div>
  <div><img id="img4" src="images/chrome.png"><br>亮度 brightness(4)

</div>
  <div><img id="img5" src="images/chrome.png"><br>对比度 contrast(1.5)

</div>
  <div><img id="img6" src="images/chrome.png"><br>色相旋转 hue-rotate

(60deg)</div>
  <div><img id="img7" src="images/chrome.png"><br>透明度 opacity(0.6)

</div>
  <div><img id="img8" src="images/chrome.png"><br>棕褐色 sepia(1)</div>
  <div><img id="img9" src="images/chrome.png"><br>反转颜色 invert(1)

</div>
  <div><img id="img10" src="images/chrome.png"><br>模糊 blur(2px)</div>
  <div><img id="img11" src="images/chrome.png"><br>阴影 drop-shadow(5px 

5px 8px #333)</div>
  <div><img id="img12" src="images/chrome.png"><br>色相旋转动画</div>
  <div><img id="img13" src="images/chrome.png"><br>彩色黑白过渡演示</div>
</body>
</html>

效果就直接展示一下，个别不是特别清楚：
图片说明
图片说明