CSS3滤镜

今天在办公室亲眼目睹了同事使用CSS3滤镜为一张漂亮的照片轮廓加上了阴影,瞬间亮瞎了我的的双眼,见笑了。 
所以也迅速尝试使用CSS3滤镜让最新出炉的MUI LOGO也性感一把,试图来愉悦一下大家的双眼。

已经等不及了,赶紧奉上今天的测试结果。

CSS3滤镜包括了以下几种:

只取其一,同时存在时,后边覆盖前边。

原图


第一种:图片灰度
-webkit-filter:grayscale(1);/*值为从0 – 1*/



第二种:褐色
-webkit-filter:sepia(1);/*值为从0 – 1*/


第三种:饱和度
-webkit-filter:saturate(3);/*值为从0 – +无穷*/


第四种:色相旋转
-webkit-filter:hue-rotate(-45deg);/*值为从-无穷 – +无穷*/


第五种:invert反色
-webkit-filter:invert(1);/*值为从0 – 1*/


第六种:opacity透明度
-webkit-filter:opacity(0.8);/*值为从0 – 1*/


第七种:brightness亮度
-webkit-filter:brightness(10);/*值为从0 – +无穷*/


第八种:contrast对比度
-webkit-filter:contrast(5);/*值为从0 – +无穷*/


第九种:blur模糊
-webkit-filter:blur(3px);/*值为从0 – +无穷*/


第十种:drop-shadow阴影
-webkit-filter:drop-shadow(5px 5px 5px #000000);/*随意配*/


据了解,目前这些属性只支持webkit nightly版本和Chrome 18.0.976以上以上版本。
Caniuse的兼容统计表:
http://caniuse.com/#search=-webkit-filter



看到了这么多针对图片或者是针对标签层实现的滤镜效果,是不是有点小兴奋了呢?快快尝试一下吧。

如果想让图片的轮廓有阴影,那就对img使用webkit-filter。

最后,附上大家最为熟悉的IE滤镜参考资料作为对照,一起学习对比。
http://justcoding.iteye.com/blog/940184/
 

笔记作者:css3China

笔记链接:http://www.w3cfuns.com/blog-5443448-5400256.html

原创声明:此笔记被 css3China 标注为原创笔记,未经作者同意转载必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。

转载于:https://www.cnblogs.com/goodbeypeterpan/p/3972873.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/492905.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

全面认识“边缘云”,中国首份边缘云白皮书发布

来源:中国电子技术标准化研究院、阿里云摘要:《边缘云计算技术与标准化白皮书》近期发布,定义了边缘云计算的概念和标准等。中心云和边缘云相互配合,实现中心-边缘协同、全网算力调度、全网统一管控等能力,真正实现“无…

【Tech】Mac上安装MAMP打开本地网页

不知道为什么实验室老是用些奇葩的东西,这次是madserve,主要是用来统计移动端广告点击率的,基于PHP/MYSQL实现。 昨天很快在Windows上搭好一个xampp,并用它建立了一个virtual host把madserve跑起来了。但是在mac上xampp建立virtua…

中国10大最震撼的无人工厂,你吃的用的都是这么来的!

来源:工业机器人摘要:你吃的用的那么多东西,早已不是“人造”的!1.上海通用金桥工厂:386台机器人图中展示的是上海通用金桥工厂。这里号称中国最先进的制造业工厂、中国智造的典范。即使从全球来看,这个水平…

对人工神经网络“开刀”,利用神经科学消融法检测人工神经网络

来源:DeepTech深科技摘要:当谈及人工神经网络,黑箱问题总会引起热议,人们对黑箱问题的评价褒贬不一。有人认为黑盒是神经网络的优势,这代表神经网络的自主学习性,代表其自动学习以及自动完善的特性。但大部…

从车联网到工业智联网

来源:智车科技摘要:本文从工业互联网的典型应用—车联网谈起,从工业网联技术发展过程的视角分析了工业智联网的构架、关键技术和前沿趋势,对智联网视域下的未来智联交通作出了展望。随着智能技术的发展,从工业互联网发…

清华发布《AI芯片技术白皮书》:新计算范式,挑战冯诺依曼、CMOS瓶颈

来源:机器人 悦智网摘要:在由北京未来芯片技术高精尖创新中心和清华大学微电子学研究所联合主办的第三届未来芯片论坛上,清华大学正式发布了《人工智能芯片技术白皮书(2018)》。《白皮书》首次整合了国际化的学术和产业资源,紧扣学…

这是一份 AI 界最强年终总结

来源:AI 科技评论圣诞节元旦假期过后,谷歌资深 Fellow、谷歌 AI 负责人 Jeff Dean 代表所有谷歌的研究部门发出了他们的 2018 年度科研研究年终总结。这一年,谷歌的科研人员们在人工智能、量子计算、计算图形学、算法理论、软件系统、TPU、开…

89页PPT揭秘:人工智能产业爆发的拐点

来源:wpr摘要:如今,人工智能正在以前所未有的速度发展。目前,全球顶尖的IT和互联网公司都加大了对人工智能领域的投入,包括Google、Facebook、微软投入巨大,人工智能进入爆发式增长的拐点。这份关于人工智能…

医疗健康大数据:应用实例与系统分析

来源:网络大数据1 、概述随着信息技术和物联网技术的发展、个人电脑和智能手机的普及以及社交网络的兴起,人类活动产生的数据正以惊人的速度增长。根据国际数据公司(International DataCorporation,IDC)的报告,仅2011年&#xff0…

RANSAC算法的简单理解

图像拼接中看到了特征匹配的部分,特征匹配主要是特征点的匹配。在特征点匹配的时候,首先进行粗匹配,粗匹配通常是进行一对匹配点进行对比,误差越小越可能是一对匹配点;精匹配方法中,我们可以用到RANSAC(Ran…

IEEE论文:城市大脑,基于互联网大脑模型的智慧城市建设

作者:刘锋 互联网进化论作者 计算机博士前言:基于互联网大脑模型与智慧城市建设的结合,2015年2月在csdn第一次发布文章《基于互联网大脑架构的智慧城市建设探讨》提出了城市大脑的建设方向,地址:https://blog.csdn.net…

Python利用turtle绘制五角星

绘制用到的参数我们存放在data.txt文件中,data.txt文件内容如下: 300,0,144,1,0,0 300,0,144,0,1,0 300,0,144,0,0,1 300,0,144,1,1,0 300,0,108,0,1,1 184,0,72,1,0,1 184,0,72,0,0,0 184,0,72,0,0,0 184,0,72,0,0,0Python代码如下: # data.…

深度观察|工业物联网的应用场景和市场潜力

来源:readwrite编译:郭仁贤从人力资源到数字技术,物联网(IoT)改变了我们与周围世界互动的方式。在每一次的挑战和新的风险中,我们生活中最个人化的领域也迎来了新的机遇。物联网数字产业真正颠覆的是农业、…

scrapy 工作流程

Scrapy的整个数据处理流程由Scrapy引擎进行控制,其主要的运行方式为: 引擎打开一个域名,蜘蛛处理这个域名,然后获取第一个待爬取的URL。引擎从蜘蛛那获取第一个需要爬取的URL,然后作为请求在调度中进行调度。引擎从调度…

观五官知罕见病,AI“望诊”靠谱吗

新型人脸识别软件可助力罕见病诊断来源:中国科学报将人工智能(AI)用于医疗辅助诊断早已经不是什么新鲜事,仅AI医学影像辅助诊疗一项就有非常多的应用场景。然而,近日来自美国波士顿一家名为FDNA的数字医疗公司的研究人…

持续集成:CruiseControl.NET + VisualSVN.Server

刚换了工作,有需要搭建一套持续集成的平台,做一下总结。 首先是我用到的工具: 上面缺少了Microsoft Fxcop,可以用来做代码校验,不过实际情况暂时还没有用到。主要的需求目前是,使用已发布的稳定版本代码作为…

学会动态丨中国人工智能学会重磅发布《2018人工智能产业创新评估白皮书》

来源:中国人工智能学会摘要:《2018人工智能产业创新评估白皮书》由中国人工智能学会、国家工信安全中心、华夏幸福产业研究院、思保环球联合发布。白皮书聚焦人工智能的使能技术与应用场景两个层面,基于论文、专利、人才、行业壁垒等多个维度…

图像的几种变换简单介绍

刚体变换 平移旋转 保持欧式距离的变换,这意味着图像只进行2D平移和2D旋转运动。它只有3个自由度。 相似变换 平移旋转缩放 相比刚体变换增加了均匀的缩放。均匀的意思是各个方向的缩放比例相同。尺度变换增加了一个自由度,所以自由度为4。和刚体一…

《C语言编写 学生成绩管理系统》

/* (程序头部凝视開始) * 程序的版权和版本号声明部分 * Copyright (c) 2011, 烟台大学计算机学院学生 * All rights reserved. * 文件名: 学生成绩管理系统 * 作 者: 刘江波 * 完毕日期: 2012 年 6 月 23 日 * 版 本 号: v.62…

人工智能顶刊TPAMI2019最新《多模态机器学习综述》

来源:专知摘要:”当研究问题或数据集包括多个这样的模态时,其特征在于多模态。【导读】人工智能领域最顶级国际期刊IEEE Transactions on Pattern Analysis and Machine Intelligence(IEEE TPAMI,影响因子为 9.455),2019年1月最新…