有没有办法用 CSS 来模仿 Photoshop 的叠加滤镜?

发布于 2024-11-18 11:50:24 字数 92 浏览 1 评论 0原文

叠加混合会改变顶部图像的颜色,而不是仅仅改变透明度。有没有办法用 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技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

待"谢繁草 2024-11-25 11:50:24

纯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.

血之狂魔 2024-11-25 11:50:24

我迟到了,但现在有一个 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.

禾厶谷欠 2024-11-25 11:50:24

现在你可以使用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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文