我试图让我的Hello World在滑动时受到红色背景 colored颜色 的影响,如果可能的话,如何实现这一点?当下面的元素滑到文本后面时,文本应该会改变 colored颜色

body {
  height: 150vh;
  background: #000;
}

h1 {
  mix-blend-mode: difference;
  color: rgb(255, 255, 255);
  z-index: 2;
  
}

.top {
  position: sticky;
  top: 0;
  height: 50vh;
z-index: 1;

}

.bottom {
  background: rgb(232, 12, 12);
  position: sticky;
  top: 0;
  height: 50vh;
  position: relative;
  isolation: isolate;
}
<div>
  <div class="top">
    <h1>Hello World</h1>
  </div>
  <div class="bottom"></div>
</div>

推荐答案

要使Mix-Blend-模式起作用,请按如下方式应用

body {
            height: 150vh;
            background: #000;
          }
          
          h1 {
        
            color: rgb(255, 255, 255);
            z-index: 2;
            
          }
          
          .top {
            mix-blend-mode: difference;
            position: sticky;
            top: 0;
            height: 50vh;
          z-index: 1;
          
          }
          
          .bottom {
            background: rgb(232, 12, 12);
            position: sticky;
            top: 0;
            height: 50vh;
            position: relative;
            isolation: isolate;
          }
<div>
        <div class="top">
          <h1>Hello World</h1>
        </div>
        <div class="bottom"></div>
      </div>

你的 comments 区也有人说了同样的话-戴

Css相关问答推荐

如何使一组元素的行为像字符串一样?

在COLOR-MIX()中使用var()似乎会使其对于不支持COLOR-MIX()的浏览器具有可读性,从而阻止了回退的工作

如何在CSS中实现边框的局部透明?

如何在不使用 sx props 的情况下从 Select 样式中定位 mui paper 组件?

我如何使用 CSS 在我的应用程序中每隔 3 位用逗号分隔数字?

有没有办法在 CSS 字体速记中使用数字字体粗细?

Tailwind CSS: Select 单选按钮时不应用同行判断的边框

.SVG 文件对象在锚标签下可点击

before 元素的过渡效果

子菜单的背景不占用所有空间

用css重复表格边框

停止 div 推动另一个 div 做出react

CSS 中的区域类似于 C# 区域?

我应该使用 CSS :disabled 伪类还是 [disabled] 属性 Select 器,还是见仁见智?

css 单行或多行垂直对齐

如何更改 Angular Material 上 mat-icon 的大小?

如何将 bootstrap 列高设为 100% 行高?

名称-值对的语义和 struct

background-position-x (background-position-y) 是标准的 W3C CSS 属性吗?

CSS属性中的auto值是什么意思.