css实现文字颜色适配背景

最新推荐文章于 2024-12-22 17:01:06 发布

原创最新推荐文章于 2024-12-22 17:01:06 发布 · 1.8k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #css3 #html5

收录于

CSS 专栏收录该内容

1 篇文章

订阅专栏

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

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

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

就可以得到最终效果了