如何解决如何结合双色调效果和CSS mix-blend-mode:difference
我有一个非常具体的案例,在这里我无法解决。我目前正在尝试实现一种严重依赖于渐变和混合模式的设计。我想要实现的是this effect,其中黑色变成1号颜色,白色变成2号。
编辑:我的渐变不是标准的线性或径向渐变。我使用随机放置元素的不同图层来创建 organic 渐变,如下所示。
我认为可行的解决方案是使用SVG <feComponentTransfer>
滤镜将黑白范围映射到我的两种自定义颜色。当我将其应用于mix-blend-mode: difference
(step 2)中的前景元素时,它可以很好地工作,但是一旦将其应用于黑白渐变背景,CSS混合模式就会拾取颜色和双色调效果不再起作用。 (step 3)
任何有关如何解决该问题的帮助或建议将不胜感激! 谢谢
解决方法
也许您可以简单地考虑两个不同的渐变,一个为文本着色,另一个为背景着色。
这是一个基本示例:
git rm -f --cached client && git add . && git commit -m 'Add client folder back to git repo' && git push heroku master
.container {
font-size:25px;
text-align:center;
background:radial-gradient(circle,red,blue,red);
}
.container > div {
overflow:auto;
background:radial-gradient(circle,blue);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。