1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

Web设计中的CSS混合模式

作者:用户 来源:互联网 时间:2016-03-11 17:12:47

浏览器mode属性模式混合背景支持

Web设计中的CSS混合模式 - 摘要: 本文讲的是Web设计中的CSS混合模式, 使用过Photoshop或Illustrator的人都清楚里面有一个图层的混合模式。 例如:Multiply, screen, overlay 和 so

使用过Photoshop或Illustrator的人都清楚里面有一个图层的混合模式。

Web设计中的CSS混合模式-<a href=css混合模式">

例如:Multiply, screen, overlay 和 soft light等等,使用这些混合模式,配上一定的透明度,让你的效果更佳。然而,Web设计师能掌握好“混合模式”就能制作出好的页面吗?对的,透明度opacity,就是他。

酷的东西并不难,如果要将这些效果用CSS实现出来还是有难度的,或者是有点不可能。如下图效果,第一行从左到右依次是:Doublenaut, Graham Hicks, Jonathan Quintin和Geoff Teehan。第二行从左向右依次是:Ben Johnson, Claire Morales, Alan Defibaugh和Jess Barlow。

Web设计中的CSS混合模式-css3 混合模式

混合模式和Web页面

值得可惜的是,不能有更多的混合模式像opacity属性得到众多浏览器的支持,事实也证明,要让浏览器实现类似于Photoshop中图层混合模式的效果还是一件难以完成的任务。有一些混合模式通过滤镜在SVG中是可用的,但这些都是有限的,在实际项目中用到并不多见。

尽管这样,事情正在快速往好的方面发展,现在在制定有关于CSS混合模式规范的草案。Adobe Web平台团队正在大力推广CSS混合模式。(这个团队还在推广其他一些有兴趣的CSS特性,如Regions和Shaders)。

眼下,有关于CSS混合模式规范草案中提供了三个属性:background-blend-modemix-blend-modeisolation。让我们一起来探索他们。

Canvas 2D: 他会有混合模式?

Web设计中的CSS混合模式-多个设计模式混合使用

首先,这里有一个小秘密。混合模式在HTML5的Canvas中的应用除了在IE浏览器的其他所有最新浏览器都得到支持。甚至在移动端的Chrome和Safari的浏览器上也得到支持。但是我们为什么要停止呢?混合模式在CSS中非常有用。

CSS的混合模式:background-blend-mode

Web设计中的CSS混合模式-设计模式 混合模式

background-blend-mode属性允许指定一个元素背景层的混合模式。无论是元素的背景颜色background-color、背景图像background-image或者用渐变实现的背景图片,都可以通过background-blend-mode来指定混合模式。

Web设计中的CSS混合模式-<a href=html5与css3设计模式">

不要认为这个属性会得到多大用处?不要让你的页面走得更远。当你为一篇文章从后台上传了一张大图,给背景使用混合模式的Medium值,让你的标题显得更突出。但是,浏览器还不支持CSS混合模式,要让浏览器支持还有很漫长的路要走。上传六张不同颜色的图像适应每个人,后端服务器完成需要一定的过程。这对于读者来说,比直接使用CSS混合模式要慢一些。这个属性也可以运用于其他一些地方:

Web设计中的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-modebackground-blend-mode需要在“chrome://flags”或“opera://flags”中开启“Experimental Web Platform Features”。
  • Internet Explorer:在Canvas中不支持CSS混合模式,并且目前还找不到任何发展信息。


以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索浏览器 , mode , 属性 , 模式 , 混合 , 背景 支持 css混合模式、css3 混合模式、多个设计模式混合使用、设计模式 混合模式、html5与css3设计模式,以便于您获取更多的相关知识。

框架-bootstrap rachet framework7,三者可以做一个比较吗

...,它简洁灵活,使得 Web 开发更加快捷。[1] 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热...

分享国外高手对混合移动应用开发见解

...的标准来看它们就太慢了。因此在为移动应用开发做架构设计时,我们需要考虑新的移动设备的计算能力,而不是那些老的过时的设备。 移动开发架构设计不需要过多考虑设备的性能 我们从一些测试中得出的一个结论是:现在...

产品规范开发流程

开发准备 了解产品和设计参加需求、交互、视觉会议,了解产品设计和项目成员。了解产品面向的设备和平台。了解产品对兼容性的要求以及是否采用响应式设计等。了解产品要使用的技术(WEB技术、桌面技术、APP技术、模板...

跨平台移动应用开发的优势与不足

... 因为iOS和Android在用户界面(User Interface,UI)和用户体验设计(User Experience Design,UXD)上有着很大的差异,所以为其创建一个统一的GUI包装器并不是一项简单的任务。尽管Xamarin和其他的厂商在这方面已经做了很多超前的工作,...

前端UI框架集合

...一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。 详情 1.2 SUI Mobile 来自:阿里 SUI Mobile 是一套基于 Framework7 开发的UI库。它非常轻量、精美,...

前三篇
后三篇
弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一

云服务器9.9元/月,大学必备