一个非常有意思的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功能来实现文字或图像的旋转.缩放.倾 ...
随机推荐
- java父类与接口有相同的方法
这是java多态的一个体现,如果一个类classA继承了类classB,有实现了接口interfaceA,并且接口中有方法funA(),且父类classB中也有funA(),那么对于classA来说既 ...
- ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO)
在安装好的MySQL服务器上,配置了环境变量之后,发现用mysql无法登录,报如题的错误,实在没有办法,决定用安全模式对root用户修改密码: 首先关闭正在运行的MySQL; 在一个终端窗口运行命令: ...
- native vlan(本征VLAN)
其实就是不打tag的VLAN,因为你想,一个VLAN在经过交换设备老是打tag,然后再脱掉tag...这个很浪费计算资源,尤其是在转发的报文量相当大的时候. 如何解决: 可以定义一种vlan, ...
- webbench---linux压测工具
webbench最多可以模拟3万个并发连接去测试网站的负载能力,个人感觉要比Apache自带的ab压力测试工具好用,安装使用也特别方便,并且非常小. 1.适用系统:Linux-CentOs 2.编译安 ...
- reqwest请求api和约束(转载)
转自:https://www.oschina.net/p/reqwest reqwest 用于浏览器异步HTTP请求.支持xmlHttpRequest, JSONP, CORS, 和 CommonJS ...
- Centos 与本地终端 上传、下载 文件
首先安装lrzsz # yum -y install lrzsz 1.上传文件,执行命令rz,会跳出文件选择窗口,选择好文件,点击确认即可. # rz 运行rz命令后弹出选择文件窗口,找到要上传的文件 ...
- python+selenium安装步骤
1.先安装python 2.下载setuptools 使用方法是在 命令提示符(cmd)下 输入 "easy_install包名称" 3.安装pip 4.安装selenium如果是 ...
- 声明变量,一定要用 var!
public static T TryGet<T>(Func<T> func, T ifError = default(T)) { try { return func(); } ...
- plsql dev
访问v$session,v$sesstat and v$statname视图的权限 grant create session,resource to chf; grantselectonv_$sess ...
- linux系统文件说明
linux系统文件说明 bin 系统命令目录 dev 设备目录 home 用户的家(每个系统用户在home下都有一个自己家) root超级用户在根目录下 lib 系统库目录.so动态库文件 media ...