html与css怎么混合运用,Web设计中的CSS混合模式
使用过Photoshop或Illustrator的人都清楚里面有一个图层的混合模式。
例如:Multiply, screen, overlay 和 soft light等等,使用这些混合模式,配上一定的透明度,让你的效果更佳。然而,Web设计师能掌握好“混合模式”就能制作出好的页面吗?对的,透明度opacity,就是他。
混合模式和Web页面
值得可惜的是,不能有更多的混合模式像opacity属性得到众多浏览器的支持,事实也证明,要让浏览器实现类似于Photoshop中图层混合模式的效果还是一件难以完成的任务。有一些混合模式通过滤镜在SVG中是可用的,但这些都是有限的,在实际项目中用到并不多见。
尽管这样,事情正在快速往好的方面发展,现在在制定有关于CSS混合模式规范的草案。Adobe Web平台团队正在大力推广CSS混合模式。(这个团队还在推广其他一些有兴趣的CSS特性,如Regions和Shaders)。
眼下,有关于CSS混合模式规范草案中提供了三个属性:background-blend-mode,mix-blend-mode和isolation。让我们一起来探索他们。
Canvas 2D: 他会有混合模式?
首先,这里有一个小秘密。混合模式在HTML5的Canvas中的应用除了在IE浏览器的其他所有最新浏览器都得到支持。甚至在移动端的Chrome和Safari的浏览器上也得到支持。但是我们为什么要停止呢?混合模式在CSS中非常有用。
CSS的混合模式:background-blend-mode
background-blend-mode属性允许指定一个元素背景层的混合模式。无论是元素的背景颜色background-color、背景图像background-image或者用渐变实现的背景图片,都可以通过background-blend-mode来指定混合模式。
不要认为这个属性会得到多大用处?不要让你的页面走得更远。当你为一篇文章从后台上传了一张大图,给背景使用混合模式的Medium值,让你的标题显得更突出。但是,浏览器还不支持CSS混合模式,要让浏览器支持还有很漫长的路要走。上传六张不同颜色的图像适应每个人,后端服务器完成需要一定的过程。这对于读者来说,比直接使用CSS混合模式要慢一些。这个属性也可以运用于其他一些地方:
背景混合模式可能会被用来制造这些类似的效果甚至更好。
mix-blend-mode属性
虽然background-blend-mode属性对于背景的混合非常严格,但我们还是非常喜欢在HTML和SVG元素上像PSD中的图层一样混合背景层。这也就是mix-blend-mode属性强大之处。
mix-blend-mode可以将元素和他的背景混合在一起。也许你可以尝试,在背景上使用混合模式中的screen,要强过于使用背景颜色中的rgba()。你也可以在加载动画和混合模式上使用一个无穷数。isolation属性可以隔离元素上使用mix-blend-mode属性,用于隔离元素与背景图像的混合。
使用mix-blend-mode要比background-blend-mode更复杂,所以讨论他也更费时间,但并不会让你失望。因为CSS的混合模式即将就要到来。
我们现在可以使用CSS混合模式吗?
现在还不行,但希望今年可以得到支持。该规范已得到SVG规范小组的支持,现在就等CSS规范小组支持,也成为候选推荐标准。一旦发生这样的情况,步子就很快了,可以期望浏览器支持CSS混合模式。
至于浏览器的支持,这里有一个简短的总结:(结止于2014年1月份)
Firefox:在版本29中开始支持background-blend-mode属性,但还有一个Bug(如Demo),他们还在研究当中。而且使用mix-blend-mode属性需要在“about:config”中开启。
Safari:在"Webkit Nightly"中可以支持background-blend-mode,但并不支持mix-blend-mode。
Chrome和Opera:使用mix-blend-mode和background-blend-mode需要在“chrome://flags”或“opera://flags”中开启“Experimental Web Platform Features”。
Internet Explorer:在Canvas中不支持CSS混合模式,并且目前还找不到任何发展信息。
扩展阅读
译者手语:整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!
如需转载,烦请注明出处:
html与css怎么混合运用,Web设计中的CSS混合模式相关推荐
- Web 设计中的 5 个最具争议性的话题
在 Web 空前繁荣的今天,有关 Web 设计中的各种观点很多会成为话题,有的很快达成一致,有的则一直争议下去,本文讲述 Web 设计中的 5 大经典争议,这些争议从它们诞生的那天起,就被正反两方争得 ...
- Web设计中的中国传统色彩速查表
转自:http://css9.net/chinese-traditional-color-in-web-desig/ 觉得很全,分享一下,以下为作者iiduce所言"诗词中有:" ...
- Web设计中的黄金分割
Web设计中的黄金分割 简介 web设计中的黄金分割 ... 数学是优美的. 听上去有点奇怪? 当我第一次开始设计的时候,我确信如此.数学如此刻板乏味.你可能会惊讶的发现,最美观的设计,艺术作品,物体 ...
- 从模仿到创新:Web 设计中的中国风(上)
中国是个拥有5000年文明史的多民族国家,地域与文化延伸亚洲大部,汉风与汉字多被日本,韩国,越南等邻国采用.中国曾经兴衰,如今大门重开,接纳来自 世界的风潮,概念与技术,也包括 Web 技术.本文采访 ...
- Web 设计中的苹果风
优雅的设计贯串苹果所有的产品,也包括网站,不仅苹果自己的网站,世界上有无数模仿苹果的网站设计,然而是什么构成了苹果式网站设计风格?浅淡的配 色,大面积留白,清晰统一的导航,雅致的图标,还有,拒绝使用 ...
- 移动 Web 设计中的一些错误理念
目前,移动互联网飞速发展,越来越多的网站和应用开始向移动设备上迁移.但是,由于设备和操作方式的不同,移动Web设计和传统的Web设计之间有很多不同点,这就导致了一些错误的设计理念出现. 在设计过程中我 ...
- Web设计中最常用的10种色调以及示例演示
程序员痛苦之色彩篇,你会做网页配色吗,是不是做出来的网页发现颜色很不协调,像某些菜馆里服务员穿的大红大绿的衣服.本文主要介绍一些在Web设计中常见的配色方案,供大家学习. 1.红色 Red Examp ...
- 【转】Web 设计中最常用的 10 种色调以及它们的示例
文章转载自:开源中国社区 [http://www.oschina.net ] 本文标题:Web 设计中最常用的 10 种色调以及它们的示例 本文地址:http://www.oschina.net/ne ...
- 无懈可击 css html5,无懈可击的Web设计(第3版) 带目录书签完整pdf[80MB]
无懈可击的Web设计(第3版)将指导您采用标准设计策略来满足以各种方式浏览网页的各类用户的需要.每章首先列举一个沿用传统HTML技术的实例,然后指出该实例的局限性,并利用XHTML和CSS对其进行重构 ...
- 透明表盘 指南针 app_指南:在Web设计中使用透明度(不透明度)
透明度是一种使我们能够看到其底下的效果 . 在设计中,透明度可能会造成一个看起来比实际更宽敞的区域的错觉. 如果做得对,甚至可以使整体设计看起来更优雅. 在Photoshop中,可以通过减小不透明度或 ...
最新文章
- netcat nc端口监听 反向连接中断问题
- Freemarker获取pojo属性
- 1053 住房空置率 (20 分)
- redis查看key的过期时间_面试官:你在Redis中设置过带过期时间的Key吗?
- 数据分析入门:如何训练数据分析思维?
- Oracle AWR ASH
- 关于node.js杂记
- [python] 线程锁
- 设计模式系列之「装饰模式」
- jquery文本和值text、html、attr、val
- span 居中_H5元素的水平垂直居中布局总结
- 计算机丢失w95scm.dll,修复w95scm.dll
- 妙用PRN文件,实现文档换机打印
- 编解码格式 -- H264
- 【逗老师带你学IT】Amazing啊,Zoom落地企业内网IPPBX解决方案,ZOOM可以打国内电话了
- Unity-黑暗之魂复刻-翻滚、后跳功能
- elasticsearch—索引与检索(一)
- 【数据分析】产品日活DAU下降,怎么分析
- IE与非IE浏览器调用PC摄像头拍摄并且上传
- 安卓插件化学习 - 类的加载