按背景颜色进行文本剪辑答案

【问题标题】：Text clip by backround color按背景颜色进行文本剪辑
【发布时间】：2020-03-04 17:47:32
【问题描述】：

我正在创建一个全屏介绍页面。我需要创建一个下拉列，将背景颜色从深色变为浅色并显示内容。但我需要将主标题（文本）剪裁为背景颜色 - 在动画过程中它会发生变化。

浅色背景上的文字应该是黑色的

SCSS

.header{
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;

  .overlay{
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;

    .col{
      flex: 1;
      width: 100%;
      height: 100%;
      background-color: black;
    }
  }

  .content{
    flex: 1;
    display: flex;
    flex-direction: column;

    > div{
      flex: 1;
    }

    .title{
      position: relative;
      color: white;
      z-index: 2;
    }

    .posts{
      display: flex;
      position: relative;
      z-index: 0;

      a{
        display: block;
        width: 100%;
        height: 100%;
        background: lightblue;
        text-align: center;
      }
    }
  }
}

还有 JS

$(document).ready(function(){

  setTimeout(function () {

    $(".overlay .col").each(function (i) {
        var col = $(this);
      setTimeout(function () {

        if(!col.hasClass('animated')){
            col.addClass('animated');
            col.slideUp(500);
        }

      }, 150 * i);
    });

  }, 500);

});

动画之间也有一些小故障，我想知道为什么会发生这种情况

已解决
添加到.header

background: white;

和.header .content .title {

mix-blend-mode: exclusion;

新JSFiddle

【问题讨论】：

只是为了确认，你想要的是当条纹动画完成/正在发生时，h1 文本应该是黑色的。我说的对吗？
@AKNair 当动画发生时 - 当背景光和相反时，文本的一部分变暗

标签： javascript jquery html css animation

【解决方案1】：

你能编辑你的标题 css 让它显示吗：

.title{
  position: relative;
  mix-blend-mode: exclusion;
  color:white;
  z-index: 3;

}

注意：这可能不适用于旧版本的 IE - 让我知道它对你的效果如何，干杯。

详细了解 mix-blend-mode 属性 here。

更新：这是一个修改过的小提琴，显示了动画包裹在列上而不是每列动画 - https://jsfiddle.net/kqyno63x/

【讨论】：

您错过了为.header 添加背景属性，但不行！更新的问题！
很抱歉没有解决动画故障，您使用的是每列的动画锚定，您（可能还有浏览器）将动画锚定在单个 div 包装上会不会更容易在柱子周围，还是那不是您想要的？如果我有时间，我会看看我是否可以稍后在小提琴的修订版中展示它。

【解决方案2】：

您可以为要在背景中显示的文本设置颜色和不透明度。请参考下面的代码。也请找到相同的小提琴链接。

.textBackground{
 color:black;
 opacity: 0.3;
}
<h1 class="textBackground">Lorem ipsum dolor sit amet</h1>

【讨论】：