有没有办法用 CSS 来模仿 Photoshop 的叠加滤镜?
叠加混合会改变顶部图像的颜色,而不是仅仅改变透明度。有没有办法用 CSS 来模仿这个?仅导出图层设置为叠加的 Photoshop 图像并将其放置在网页的背景上是行不通的。
The overlay blend alters the color of the image on top, as opposed to just altering the transparency. Is there a way to mimic this with CSS? Just exporting a photoshop image with the layer set to overlay and placing it over a background on the web page doesn't work.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
![扫码二维码加入Web技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
纯css做不到,但是用javascript可以。查看 Pixastic 的混合功能,它有大约 20 种与 Photoshop 中的混合方法相匹配的混合方法。
注意:多年来,这个答案已经变得不太准确。
mix-blend-mode
属性现在适用于大多数浏览器,而 pixastic 似乎已经消失了。It can't be done with pure css, but it can be done with javascript. Check out Pixastic's blend function, it has ~20 blending methods that match those in photoshop.
Note: this answer has become less accurate over the years. The
mix-blend-mode
attribute now works across most browsers, and pixastic seems to have disappeared.我迟到了,但现在有一个
mix-blend-mode
css 属性,它将混合模式应用于整个元素,并考虑到下面的元素。I'm late to the party, but there is now a
mix-blend-mode
css property that applies blend mode to an entire element which takes into account the elements below.现在你可以使用CSS来做到这一点,但只能在现代浏览器中,尝试
background-blend-mode:multiply;
它将元素的背景图像与其背景颜色混合。
now you can do it with CSS but only in modern browser, try
background-blend-mode: multiply;
it blend the background-image of an element with its background-color.