【问题标题】:CSS Color overlay with blending mode multiplyCSS 颜色叠加与混合模式相乘
【发布时间】:2016-12-05 09:51:45
【问题描述】:

在 Photoshop 中,像 FX 这样的 Alpha 通道,有没有办法将图像乘以颜色? 例如,我有黑白和透明按钮,我想让它成为 4 种不同的颜色 + 4 种颜色的悬停状态。

如果是 glsl 着色器,我会简单地将每个像素乘以顶点颜色。

这是按钮精灵: https://dl.dropbox.com/s/4j43vf8l50mifw1/common_button_map_menu.png

【问题讨论】:

    标签: css sprite effects


    【解决方案1】:

    现在浏览器对 CSS 背景图像的混合模式支持有限。尝试将背景设置为纯色并在背景图像上使用:

    background-blend-mode: multiply;
    

    IE 不会玩,Safari 实现不完整http://caniuse.com/#search=blend-mode

    【讨论】:

    • 但是按钮透明像素下的像素(设置为bg)也会成倍增加。因此,如果我假设一张照片和一个 div(按钮+颜色为 bg)漂浮在该照片上,就会出现问题。按钮的透明像素不会掩盖背景颜色,它会与底层照片相乘。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-05-10
    • 2014-12-06
    • 1970-01-01
    • 2011-08-15
    • 2014-04-09
    • 1970-01-01
    • 2020-12-25
    相关资源
    最近更新 更多