一个非常有意思的css3属性filter
filter这属性貌似可以是img图片在黑白与彩色间转换 filter:grayscale(1)为黑白色,filter:grayscale(0)位彩色,可以用于hover效果 img:hover{filter:grayscale(0)}图片变彩色,兼容问题当前主流浏览器(IE除外)支持,使用前缀,-webkit-filter 、-moz-filter、-ms-filter、-o-filter
大致无语:filter: none | <filter-function > [ <filter-function> ]*
默认为none,不具备继承性,其中filter-function可选值有以下(翻译不是很准,O(∩_∩)O百度的):
这些值默认大都是100%也就是(1) blur hue-rotate默认值是(0);
- grayscale(灰度)
- sepia(这个百度是 乌贼,。。。也有翻译为褐色)
- saturate饱和度
- hue-rotate色相旋转
- invert反色
- opacity透明度
- brightness亮度(个人感觉这个比较有用,)
- contrast对比度
- blur模糊
- drop-shadow阴影
一个非常有意思的css3属性filter的更多相关文章
- 关于css3属性filter
今天看百度百科,看到其中一页所有图片背景全都设置为了灰白色,于是研究了番,发现是应用了filter滤镜这个属性. // 修改所有图片的颜色为黑白 (100% 灰度): img { -webkit-fi ...
- CSS3属性 box-shadow 向框添加一个或多个阴影
CSS3属性 利用box-shadow制作网页页眉背景 box-shadow 浏览器支持 IE9+.Firefox 4.Chrome.Opera 以及 Safari 5.1.1 支持 box-shad ...
- 学习笔记:CSS3的filter属性
CSS3的filter属性 (版权归原作者所有) http://www.jianshu.com/p/ca7a2bdcc1e7/comments/4956985 filter: blur(5px); f ...
- JS判断浏览器是否支持某一个CSS3属性
1.引子 css3的出现让浏览器的表现更加的丰富多彩,表现冲击最大的就是动画了,在日常书写动画的时候,很有必要去事先判断浏览器是否支持,尤其是在写CSS3动画库的时候.比如transition的ani ...
- 判断浏览器是否支持某一个CSS3属性
判断浏览器是否支持某一个CSS3属性 function supportCss3(style) { var prefix = ['webkit', 'Moz', 'ms', 'o'], i, humpS ...
- CSS3的filter用法
最近到处看到有人在说CSS3的filter一直没有时间自己去测试这效果.今天终于抽出时间学习这个CSS3的Filter.不整不知道呀,一整才让我感到吃惊,太强大了.大家先来看个效果吧: 我想光看上面的 ...
- css3属性 -webkit-filter
css3属性 -webkit-filter -webkit-filter是css3的一个属性,Webkit率先支持了这几个功能,感觉效果很不错.下面咱们就学习一下filter这个属性吧. 现在规范中支 ...
- 如何处理CSS3属性前缀
今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Aut ...
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) 在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...
随机推荐
- weex 小结--内建模块
使用以下模块时,需要导入依赖:var *** = require('@weex-module/****'); 1. navigator --像浏览器一样切换页面 2. webview(module) ...
- nodejs的第四天学习笔记
一. ECMAScript6(es2015)es6语法 es6/es2015,在es5的基础上扩展了很多新的功能,我们要学习仅仅是es6中的部分常用新功能,这些功能在使用的时候一定要慎重,因为他们之中 ...
- Evolutionary Computing: 5. Evolutionary Strategies(2)
Resource: Introduction to Evolutionary Computing, A.E.Eliben Outline recombination parent selection ...
- OpenCV2的Mat矩阵形式自定义初始化
我们知道,OpenCV2的矩阵形式是Mat,那么Mat矩阵的初始化怎么自定义呢 ?由于比较简单,文字部分我就不多加说明了,见代码,有下面几种: //////////////////////////// ...
- 查找数组中重复项的index
var ary = [5, 4, 4, 2, 7, 8, 33, 2222, 99, 88]; function isRepeat(arr) { var hash = {}; for (var i=0 ...
- 手机版web相关meta配置
若页面需默认用ie兼容内核,增加标签: 若页面需默认用ie标准内核,增加标签: --> 页面标题
- u盘文件恢复
同事的一个u盘,在别的机器上用过之后,插到自己的机器上,被360报警有木马,处理完后,一些文件和文件夹不见了. 拿到我的机器上,360弹出框问要不要处理,列表里显示有几个文件夹被隐藏起来了,选择显示后 ...
- 51nod1265 四点共面
题目链接:51nod 1265 四点共面 四个点构成的三个向量a,b,c共面的充要条件是存在不全为零的实数x,y,z满足x*a+y*b+z*c=0,然后想到线代了.. 其实就是三个向量的混合积为0:( ...
- vs2015打包winform程序遇到的一系列问题
1.因为打包的时候用的是release版本的东西,所以就先把项目按release编译一下,然后一大波bug,后来修改了生成目标平台为x86,我的解决方案里面加上安装部署项目共5个(ui配置:活动rel ...
- 超级文件搜索器(SuperSearch)
写了个工具,各个分享渠道上传太难了,在这里分享给大家吧! 中文名称:超级文件搜索器 英文名称: SuperSearch 适用对象:硬盘里文件达到数万至数千万级的用户 运行环境:WindowXP,Wi ...