首先有一个图标是这样👇 (只是一个图标 背景不是白色)
在这里插入图片描述
要实现这种效果 背景色粉色 图标提亮白色👇
在这里插入图片描述
第一步加背景色 粉色

background:pink

效果如下👇
在这里插入图片描述
要将图标变为白色 就可以使用inver进行反转
1表示反转100%

filter:invert(1)

效果如下👇
在这里插入图片描述
可以看到图标颜色反转了 但是背景色也一起反转
此时要将背景色改为当前反转后的背景色
即这个有点绿绿的颜色 用取色器取色后是#003f34

background:#003f34

就可以得到需要的效果👇
在这里插入图片描述
总结

filter:invert(1);
background:#003f34
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐