css实现文字颜色适配背景

最新推荐文章于 2025-02-25 17:45:34 发布

Wings_Lee

最新推荐文章于 2025-02-25 17:45:34 发布

阅读量1.5k

点赞数

分类专栏： CSS 文章标签： css css3 html5

本文链接：https://blog.csdn.net/liyp921210/article/details/129656352

版权

CSS 专栏收录该内容

1 篇文章

订阅专栏

文章介绍了如何利用CSS的mix-blend-mode属性和hover效果，使文字颜色根据背景的渐变动态变化。通过将mix-blend-mode设置为difference，并配合颜色和hover的transform效果，可以创建出一种文字在背景颜色变化时同步调整的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

我们希望文字能根据背景颜色而动态变化 , 即使加入了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);
   }

就可以得到最终效果了