css 实现文字智能适配背景

css 实现文字智能适配背景

本篇介绍，如何利用CSS实现文字根据背景颜色智能适配字体颜色
需求：假如背景是黑色，文字要显示白色，背景是白色，文字要显示黑色
要实现上述需求，可以通过css中mix-blend-mode的混合属性去实现。这里只需要将mix-blend-mode属性设置为difference，再设置当前的字体颜色即可实现上述需求。
这里就介绍一下difference的作用，mix-blend-mode设置为difference后，会使用差值算法。去计算当前元素的色值与当前父元素的色值去进行相减的计算，得出差值作为当前元素的色值。
根据上面的需求，当父元素背景色是黑色，其色值为rgb(0,0,0) 要使文字显示成白色，只需要将当前的字体颜色色值设置为rgb(255,255,255)，两个色值相减字体颜色即为白色。如果父元素背景为白色，相减后即为黑色。即可实现文字适配背景色的效果

.parent1{
	background:rgb(0,0,0);
}
.parent2{
	background:rgb(255,255,255);
}

.children{
	mix-blend-model:difference;
	color:rgb(255,255,255)
}

<div class="parent1">
	<div class="children"></div>
</div>

<div class="parent2">
	<div class="children"></div>
</div>