当前位置：文江博客话题详情

如何复制PS多层模式

发布于 2024-09-03 12:29:16 字数 175 浏览 12 评论 0原文

有人知道使用图像或 CSS 复制 Photoshop 多层模式的好方法吗？

我正在开发一个项目，该项目的缩略图会在您将鼠标悬停在缩略图上时获得颜色叠加，但设计人员使用了一个图层集来进行乘法，而我不知道如何在网络上生成它。

我想出的最好的办法是使用 rgba 或透明 png，但即使如此，它看起来也不正确。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

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

薄暮涼年 2024-09-10 12:29:16

为此引入了新的 CSS 属性，它们是 blend-mode 和 background-blend-mode。

目前，您无法在任何类型的生产环境中使用它们，因为它们非常新，目前仅受 Chrome Canary（实验性网络浏览器）和 Chrome 浏览器的支持。 Webkit 每晚。

这些属性的设置与 Photoshop 的混合模式几乎完全相同，并且允许将各种不同的模式设置为这些属性的值，例如 overlay、screen、 减亮、颜色减淡，当然还有乘法..等等。

blend-mode 将允许图像（可能还有内容？目前我还没有听到任何建议。）彼此分层以应用这种混合效果。

background-blend-mode 非常相似，但用于背景图像（使用 background 或 background-image 设置）而不是实际的图像元素。

编辑：
随着浏览器支持的不断增长，下一节变得有点无关紧要。检查此图表以查看哪些浏览器对此支持：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。网/cqzJ5/
（如果您的浏览器中正确启用了样式，则应将两个图像混合以使场景看起来像是在水下）

虽然这可能不是当前最合法的答案，因为几乎完全不支持此功能，我们希望现代浏览器在不久的将来能够采用这些属性，为我们提供一个非常好的且简单的解决方案来解决这个问题。

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

There are new CSS properties being introduced to do just this thing, they are blend-mode and background-blend-mode.

Currently, you won't be able to use them in any sort of production environment, as they are very very new, and currently only supported by Chrome Canary (experimental web browser) & Webkit Nightly.

These properties are set up to work nearly exactly the same as photoshop's blending modes, and allow for various different modes to be set as values for these properties such as overlay, screen, lighten, color-dodge, and of course multiply.. among others.

blend-mode would allow images (and possibly content? I haven't heard anything to suggest that at this point though.) layered on top of each other to have this blending effect applied.

background-blend-mode would be quite similar, but would be intended for background images (set using background or background-image) rather than actual image elements.

EDIT:
The next section is becoming a bit irrelevant as browser support is growing.. Check this chart to see which browsers have support for this: http://caniuse.com/#feat=css-backgroundblendmode

If you've got the latest version of Chrome installed on your computer, you can actually see these styles in use by enabling some flags in your browser (just throw these into your address bar:)

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

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

Enable those bad boys and then check out this fiddle: http://jsfiddle.net/cqzJ5/
(If the styles are properly enabled in your browser, the two images should be blended to make the scene look like it is underwater)

While this may not be the most legitimate answer at the current moment due to the almost entirely nonexistent support for this feature, we can hope that modern browsers will adopt these properties in the near future, giving us a really nice and easy solution to this problem.

Some extra reading resources on blending modes and the css properties:

回复收藏 0 原文

娇女薄笑 2024-09-10 12:29:16

简单，有一点 SVG：

<svg width="200" height="200" viewBox="10 10 280 280">
    <filter id="multiply">
        <feBlend mode="multiply"/>
    </filter>
    <image id="kitten" x="0" y="0" width="300" height="300" xlink:href="http://placekitten.com/300" />
</svg>

和一些 CSS：

#kitten:hover {
    filter:url(#multiply);
}

小提琴： http://jsfiddle.net/7uCQQ/381/

Simple with a bit of SVG:

<svg width="200" height="200" viewBox="10 10 280 280">
    <filter id="multiply">
        <feBlend mode="multiply"/>
    </filter>
    <image id="kitten" x="0" y="0" width="300" height="300" xlink:href="http://placekitten.com/300" />
</svg>

and some CSS:

#kitten:hover {
    filter:url(#multiply);
}

The fiddle: http://jsfiddle.net/7uCQQ/381/

回复收藏 0 原文

月光色 2024-09-10 12:29:16

郑重声明一下，这个人正在开发一个库来做到这一点。我是在做研究的时候才接触到的，还没有尝试过。

https://github.com/Phrogz/context-blender

回复收藏 0 原文

风情万种。 2024-09-10 12:29:16

24.png 是可能的——如果你知道窍门的话。

在 illustrator 中，您可以将图形导出为 24.png，但这似乎永远不会像乘法那样工作。

我已经找到了。

让您的相乘图形在其
后面放置一个纯黑色 100% 框，然后
在透明度窗口中选择两个图形，选择“制作蒙版”，然后选择“反转蒙版”
导出为 24.png 文件，

就像 z 时的乘法一样-图片顶部的索引（ed）。

回复收藏 0 原文

゛清羽墨安 2024-09-10 12:29:16

没有这样的能力。您获得的唯一接近的合成选项是：

HTML5 上的
lighter 合成模式（是 a+b 而不是 a*b，并且与相乘具有相反的效果）
min 或 subtract Compositor 仅在 IE 中过滤。

两者都不是真正实用的。

一般来说，您不应尝试将 Photoshop 合成导出为图层，而应将它们渲染为单个不透明图像。对于翻转，您可以制作两个图像（一个用于正常状态，一个用于悬停）并使用 CSS :hover 样式在它们之间交换以选择不同的背景图像，或者更好，因为它不需要预加载并减少 HTTP 请求 - 将两个图像合并为一个，并使用 background-image/background-position 在每种状态下显示该图像的右侧部分作为背景图像。（“CSS 精灵”）