美文网首页CSS 专题叙述程序员
css 实现图片任意颜色赋色技术

css 实现图片任意颜色赋色技术

作者: 科哚洛夫 | 来源:发表于2018-07-09 00:59 被阅读17次

    你有你的PS,我有我的CSS,不是很硬,但是很炫! 安排!

    ~ 给大家说一个比较冷门的css属性(也不能说冷门,可以说是不常用的一个属性)

    mix-blend-mode 混合模式
    background-blend-mode 背景混合

    mix-blend-mode支持多个属性值,类似PS中的图片混杂模式
    background-blend-mode 顾名思义,设置背景图片的混杂模式。

    可以是背景图片的混合也可以是背景图片与背景颜色之间的混合

    当然并不限于png 独有- JPG、PNG、GIF 都可以,但是有一个前提要求,就是黑色纯色,背景白色:

    很遗憾,当底色是透明的时候,会被混合模式混合上叠加层的颜色,无法使用。所有,这个技术也就存在了一个使用前提:

    • 图片的底色为白色,主色为黑色

    当然主色也可以是其他颜色,只是这个时候叠加需要考虑颜色的融合,没有使用黑色直观。

    • 下面附上图参考
      请查收各位小主!
    实现图 代码参考

    大家可动手实践一下

    mix-blend-mode 混合模式
    background-blend-mode 背景混合

    当前他们还有许多参数。 等待着你们来探索

    相关文章

      网友评论

        本文标题:css 实现图片任意颜色赋色技术

        本文链接:https://www.haomeiwen.com/subject/enwauftx.html