1. 程式人生 > >css3 濾鏡 模糊,黑白,對比度等濾鏡效果效果

css3 濾鏡 模糊,黑白,對比度等濾鏡效果效果

先上程式碼:
    filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */   
    -webkit-filter: blur(10px); /* Chrome, Opera */
    -moz-filter: blur(10px);
    -ms-filter: blur(10px);    
    filter: blur(10px);
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */
故名思議,這是一個用來達到模糊圖片或者其他東西的屬性,載入body頁面可以模糊整個頁面,據說也可以用在video上窩
,這種用來做模擬載入效果很實用。
詳解filter屬性:注意我說的這個filter是css3filter,不是ie濾鏡filter,
css3 filter的屬性值有一下幾個:
grayscale灰度                       filter:grayscale(1)代表完全灰色,也就是黑白色,用法下面的都是一樣的,填一個引數。
  1. sepia褐色(求專業指點翻譯)
  2. saturate飽和度
  3. hue-rotate色相旋轉
  4. invert反色
  5. opacity透明度
  6. brightness亮度
  7. contrast對比度
  8. blur模糊
  9. drop-shadow陰影
  10. 附上大漠翻譯的部落格網址和這些屬性線上測試的網址,分別如下
  11. http://www.w3cplus.com/css3/ten-effects-with-css3-filter
  12. http://jsfiddle.net/w3cplus/wThjx/