CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了css – 如何复制PS乘法层模式大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
有人知道一个好的方法来复制Photoshop的多层模式使用图像或CSS?

我正在做一个项目,有一个缩略图,当你悬停在他们上面时,得到一个彩色叠加,但设计师使用一个层设置乘法,我不知道如何在网上生产它。

我想出的最好的事情是使用rgba或透明的png,但即使这样看起来不正确。

解决方法

有新的CSS属性被介绍来做这个事情,他们是混合模式和背景混合模式。

目前,您将无法在任何类型的生产环境中使用它们,因为它们非常新,目前只有Chrome Canary(实验性网络浏览器)支持。 Webkit每夜。

这些属性被设置为几乎与photoshop的混合模式完全相同,并且允许将各种不同的模式设置为这些属性的值,例如覆盖,屏幕,减轻,颜色闪避,以及当然倍增等。 。

混合模式将允许图像(和可能的内容?我没有听到任何建议,在这一然。)分层在彼此的顶部,以应用这种混合效果。

背景混合模式将是相当类似,但将打算用于背景图像(使用背景或背景图像设置),而不是实际的图像元素。

编辑:
下一部分变得有点不相关,因为浏览器支持正在增长..检查这个图表,以查看哪些浏览器支持这个:http://caniuse.com/#feat=css-backgroundblendmode

如果您的计算机上安装了最新版本的Chrome,您可以通过在浏览器中启用某些标记来查看这些样式(只需将这些标记放入您的地址栏:)

chrome://flags/#enable-experimental-web-platform-features
chrome://flags/#enable-css-shaders

* note that the flags required for this might change at any time

启用那些坏男孩,然后检查这个小提琴:http://jsfiddle.net/cqzJ5/
(如果在浏览器中正确启用样式,则两个图像应混合以使场景看起来像是在水下)

然这可能不是当前最合理的答案,由于几乎完全不存在对此功能的支持,我们可以希望现代浏览器将在不久的将来采用这些属性,给我们一个非常好的和容易的解决方案这个问题。

关于混合模式和css属性的一些额外的阅读资源:

> http://blogs.adobe.com/webplatform/2013/06/24/css-background-blend-modes-are-now-available-in-chrome-canary-and-webkit-nightly/
> http://demosthenes.info/blog/707/PhotoShop-In-The-Browser-Understanding-CSS-Blend-Modes
> http://html.adobe.com/webplatform/graphics/blendmodes/

大佬总结

以上是大佬教程为你收集整理的css – 如何复制PS乘法层模式全部内容,希望文章能够帮你解决css – 如何复制PS乘法层模式所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。