Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。

今天领导给我提了一个需求，说有一个色块，上面有黑白两种不同的颜色，还有一排文字左右来回移动，要求文字移动到黑色块上的时候文字为白色，移到白色块上的时候为黑色。

说实话刚接到这个需求的时候确实楞了一会儿，不过看到是黑白色的时候还是稍微放松了点，这不就是传说中的“反色”吗，还好还好，css里面不是有个混合模式mix-blend-mode吗，应该能实现，赶紧查资料~

定义

mix-blend-mode CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

用法

mix-blend-mode: normal;          //正常
mix-blend-mode: multiply;        //正片叠底
mix-blend-mode: screen;          //滤色
mix-blend-mode: overlay;         //叠加
mix-blend-mode: darken;          //变暗
mix-blend-mode: lighten;         //变亮
mix-blend-mode: color-dodge;     //颜色减淡
mix-blend-mode: color-burn;      //颜色加深
mix-blend-mode: hard-light;      //强光
mix-blend-mode: soft-light;      //柔光
mix-blend-mode: difference;      //差值
mix-blend-mode: exclusion;       //排除
mix-blend-mode: hue;             //色相
mix-blend-mode: saturation;      //饱和度
mix-blend-mode: color;           //颜色
mix-blend-mode: luminosity;      //亮度

鼓掌.jpeg

白色，黑色，那不就是差值吗，试一下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>颜色反转</title>
	</head>
	<style>
		div {
		    height: 100vh;
		    background: linear-gradient(45deg, #000 0, #000 50%, #fff 50%);
		}
		div::before {
		    content: "Hello World";
		    position: absolute;
			font-size: 48px;
		    top: 50%;
		    left: 50%;
		    transform: translate(-50%, -50%);
		    color: #fff;
		    mix-blend-mode: difference;
		    animation: move 3s infinite linear alternate;
		}
		@keyframes move {
		    0% {
		        transform: translate(-30%, -50%);
		    }
		    100% {
		        transform: translate(-70%, -50%);
		    }
		}
	</style>
	
	<body>
		<div></div>
	</body>
</html>

噔噔蹬蹬~看效果

动画.gif

完美实现

不过话说回来，这次是黑白色，万一下次领导又换成其他颜色呢，不行，趁代码还热乎，我得多试几种

发现一个问题：

通过 mix-blend-mode:difference 与背景色叠加之后的颜色，黑白色倒是没啥问题，换成其他颜色虽然能够正常展示，但是不一定是最适合的颜色。

终究还是扛不下所有啊，大家还有什么其他方法吗？欢迎评论区留言告诉我！万分感谢！

CSS如何让文字智能适配背景颜色

定义

用法