filterプロパティの詳細

ツールバーの
名前
を選択します.
説明
grayscale
グレースケール
値は数値
0から1までの小数点(0と1を含む)
sepia
褐色
値は数値
0から1までの小数点(0と1を含む)
saturate
ほうわど
値は数値
デフォルトは1です.1未満の小数でも、1より大きいでもかまいません.
hue-rotate
色相回転
値は角度
0-360deg
invert
はんしょく
値は数値
0から1までの範囲の小数(0と1を含む)/*IE 10*/
opacity
透明度
値は数値
0から1までの小数点(0と1を含む)
brightness
きど
値は数値
デフォルトは1で、1(暗くなる)より小さく、1(明るくなる)より大きくすることができます.
contrast
コントラスト
数値
デフォルトは1です.1より大きくても、1より小さくてもかまいません.
blur
ぼかし
値はlength
filter:blur(2 px)/*IE 10*/
drop-shadow
影
値はshadow()
書き方はcss 3 box-shadowに似ています.例えばfilter:drop-shadow(0,0,10 px,black)
特に、火狐、operaブラウザではfilterプロパティはサポートされていませんので、一般的なプロパティを記述して定義するときに、例えば、半透明プロパティ:opacityであれば、opacity:.5;/*に直接定義できます.Opera9.0+、Firefox1.5+、Safari、Chrome*/その他ie 6にも特定のpngピクチャ定義方式があります:background:url(../images/yz.png)center bottom no-repeat;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=”images/yz.png”);_background:none; IE透明定義方式filter:alpha(opacity=30);/*IE5、IE5.5、IE6、IE7*/
1.grayscale

div .f_grayscale {     
	filter: grayscale(50%);    
	-webkit-filter: grayscale(50%);   
	-moz-filter: grayscale(50%);    
	-ms-filter: grayscale(50%);    
	-o-filter: grayscale(50%);    
   }  

2.sepia

div .f_sepia {    
    filter:sepia(0.1);    
    -webkit-filter:sepia(0.1);   
    -moz-filter:sepia(0.9);   
    -ms-filter:sepia(0.9);   
    -o-filter:sepia(0.9);   
}  

3.saturate

div .f_saturate{   
    filter:saturate(125);   
    -webkit-filter:saturate(3);   
    -moz-filter:saturate(3);   
    -ms-filter:saturate(3);   
    -o-filter:saturate(3);   
}  

4.hue-rotate

div .f_hue-rotate{   
    filter:hue-rotate(300deg);   
    -webkit-filter:hue-rotate(300deg);   
    -moz-filter:hue-rotate(50deg);   
    -ms-filter:hue-rotate(50deg);   
    -o-filter:hue-rotate(50deg);   
}  

5.invert

div .f_invert{   
    filter:invert(.3);   
    -webkit-filter:invert(.3);   
    -moz-filter:invert(.3);   
    -ms-filter:invert(.3);   
    -o-filter:invert(.3);   
}  
  
 
     
   
 
   
 
     
   
 
   
 
    
 
 
   
 
   
 
    
 6.opacity
 
   
 
   
 
    
  
div .f_opacity{   
    filter:opacity(.5);   
    -webkit-filter:opacity(.5);   
    -moz-filter:opacity(.5);   
    -ms-filter:opacity(.5);   
    -o-filter:opacity(.5);   
}  
   
    
 
    
 
     
 
 
    
 
    
 
     
 7.brightness  1   
 
    
 
    
 
      
 
 
div .f_brightness{   
    filter:brightness(5);   
    -webkit-filter:brightness(5);   
    -moz-filter:brightness(1.3);   
    -ms-filter:brightness(1.3);   
    -o-filter:brightness(1.3);   
}  
  
     

 
 
     
8.brightness  1   
 
     

 
 
      
div .f_brightness{   
    filter:brightness(.3);   
    -webkit-filter:brightness(.3);   
    -moz-filter:brightness(.3);   
    -ms-filter:brightness(.3);   
    -o-filter:brightness(.3);   
}  
  
     

 
 
     
9.contrast  1
 
 
     

 
 
      
div .f_contrast{   
    filter:contrast(2);   
    -webkit-filter:contrast(2);   
    -moz-filter:contrast(2);   
    -ms-filter:contrast(2);   
    -o-filter:contrast(2);   
}  
  
     

 
 
     
10.contrast  1
 
     

 
 
      
div .f_contrast{   
    filter:contrast(.2);   
    -webkit-filter:contrast(.2);   
    -moz-filter:contrast(.2);   
    -ms-filter:contrast(.2);   
    -o-filter:contrast(.2);   
}  
  
     

 
 
     
11.blur
 
     

 
 
      
div .f_blur{   
    filter:blur(10px);   
    -webkit-filter:blur(10px);   
    -moz-filter:blur(2px);   
    -ms-filter:blur(2px);   
    -o-filter:blur(2px);   
}  
  
     

 
 
     
12.drop-shadow
 
     

 
 
      
div .f_shadow{   
    filter:drop-shadow(3px 3px 5px rgba(0,0,0,.5));    
    -webkit-filter:drop-shadow(10px 10px 5px rgba(0,0,0,.1));    
    -moz-filter:drop-shadow(3px 3px 5px rgba(0,0,0,.5));    
    -ms-filter:drop-shadow(3px 3px 5px rgba(0,0,0,.5));    
    -o-filter:drop-shadow(3px 3px 5px rgba(0,0,0,.5));    
}  
  
     
 
     
 
       
 
     
 
 
       
     
    
 
      
     
 
 
    
 
    
 
     
 
      
    （   ）FireFox 24            ，     。    SVG     。
       blur.svg SVG  ：
 
 
      
 
 
      
 
      
 
      
 
       
 
        
 
         
 
          
 01  xml   version  =  "1.0"   encoding  =  "utf-8"  ?>  02    03  <  svg   version  =  "1.1"  04         xmlns  =  "http://www.w3.org/2000/svg"  05         xmlns:xlink  =  "http://www.w3.org/1999/xlink"  06         xmlns:ev  =  "http://www.w3.org/2001/xml-events"      07         baseProfile  =  "full"  >   08        <  defs  >  09            <  filter   id  =  "blur"  >  10                <  feGaussianBlur   stdDeviation  =  "10"   />  11            filter  >  12        defs  >  13  svg  >  
 のCSS び しコード:1  filter:   url  (blur.svg#blur);   /* FireFox, Chrome, Opera */  
  なcssコード
ソースコードの  
ヘルプの  01  .blur {  02        filter:   url  (blur.svg#blur);   /* FireFox, Chrome, Opera */  03         04        -webkit-filter: blur(  10px  );   /* Chrome, Opera */  05           -moz-filter: blur(  10px  );  06            -ms-filter: blur(  10px  );     07                filter: blur(  10px  );  08         09        filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=  10  , MakeShadow=false);   /* IE6~IE9 */  10  }  
 
   
この  は  のとおりです.http://zzstudy.offcn.com/archives/8877 
                  http://www.wufangbo.com/css3-mo-hu-xiao-guo/