美文网首页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