css实现文字颜色适配背景

首先,提供一个渐变容器 , 子元素为一段文字 , 一部分内容背景挡住了

 我们希望文字能根据背景颜色而动态变化 , 即使加入了hover效果也是如此

css中有一个属性mix-blend-mode  我将其设置为difference

文字color设置为#fff

   .father{
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(60deg,#000,#000 50%,#fff 50%);
   }
   .title{
    font-size: 60px;
    transition: 0.5s;
    mix-blend-mode: difference;
    color: #fff;
   }
   .father:hover .title{
    transform: translateX(-100px);
   }

就可以得到最终效果了