天天看點

css3 filter屬性

css3 filter的效果可以加在html5的video标簽,也可以加在image圖檔上。

css3 filter的一些屬性運用到js中: 

                    $ ('#video').css("-webkit-filter","sepia(100%)");

                    $('#video').css("-webkit-filter","blur(3px)");

                    $('#video').css("-webkit-filter","grayscale(50%)");

                    $('#video').css("-webkit-filter","brightness(2.5)");

                    $('#video').css("-webkit-filter","contrast(5)");

                    $('#video').css("-webkit-filter","hue-rotate(180deg)");

                    $('#video').css("-webkit-filter","invert(100%)");

                    $('#video').css("-webkit-filter","grayscale(100%) brightness(100%) contrast(100%)");

                    //saturate(250%)

                    //grayscale(100%) brightness(10%) contrast(100%) 黑白

                    $('#video').css("-webkit-filter","saturate(3)");

在css中也可以直接寫id或class然後 : { -webkit-filter: sepia(100%);  } 

如果想移除filter效果可以用:

                    $('#video').css("-webkit-filter","none");

css