一个非常有意思的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功能来实现文字或图像的旋转.缩放.倾 ...
随机推荐
- 构建高可用集群Keepalived+Haproxy负载均衡
重点概念vrrp_script中节点权重改变算法vrrp_script 里的script返回值为0时认为检测成功,其它值都会当成检测失败:weight 为正时,脚本检测成功时此weight会加到pri ...
- jq获取屏幕高度和宽度(盒子模型)
$(window).width(); //浏览器可视窗口宽度 $(window).height(); //浏览器可视窗口高度 $(document).width();//body的宽度 $(docum ...
- Bug总结流程
小明入职已有两年,期间测试能力已不知不觉成长许多,得到了Leader大熊的高度认可.回首这两年间,小明对"Bug总结流程"印象最为深刻,他对这个流程的认识在不断改变着:从最初的好奇 ...
- css学习笔记 7
background-position属性值为百分比的时候,第一个百分比表示水平方向的距离,第二个表示垂直方向上的距离. text-indent的主要作用是为段落设置首行缩进,只能应用于块级元素.该属 ...
- [HTML/HTML5]3 页面结构
在HTML5之前,主要的容器元素是div元素,但在HTML5中提供了数种其它容器元素供我们使用. 因此,当组织Web页面结构时,首先使用HTML将内容分成多部分,然后在对其使用CSS应用样式和格式. ...
- JavaScript中如何获取某年某月有多少天的问题
function getDaysInOneMonth(year, month){ month = parseInt(month,10); var d= new Date(year,month,0); ...
- C++对于大型图片的加载缩放尝试
Qt对于图片的操作主要集中在这几个类 QImage ,QImageReader ,QPixmap 其中QImage这个类对图片的缩放有几个很不错的技巧,不过对于大图片却并不好使,当我们去看QImage ...
- svn快速教程
本文拷贝自网址:http://www.subversion.org.cn/?action-viewnews-itemid-1 如何快速建立Subversion服务器,并且在项目中使用起来,这是大家最关 ...
- java系统高并发解决方案-转
转载博客地址:http://blog.csdn.net/zxl333/article/details/8685157 一个小型的网站,比如个人网站,可以使用最简单的html静态页面就实现了,配合一些图 ...
- 运行DbVisualizer报the java_home environment viariable does not point to a working 32-bit JDK OR JRE错误
报这个错误的根本原因就是DbVisualizer和JDK的版本不一致,那么知道原因,修改起来就方便了,要么修改DbVisualizer的版本,要么修改JDK的版本. 1.JDK7 64位 那么就在Db ...