css realizes text color adaptation background

First, provide a gradient container, the child element is a piece of text, and part of the content background is blocked

 We hope that the text can change dynamically according to the background color, even if the hover effect is added

There is a property mix-blend-mode in css and I set it to difference

Text color is set to #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);
   }

You can get the final effect