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>
