13

我有一个绝对定位的 div，具有背景颜色渐变。我有这个文本，我想在向上滚动文本时将其更改为白色。

我目前正在使用“混合混合模式”属性来实现这一点，但我找不到任何可以将文本从黑色变为白色的设置。有没有人这样做过或者能想到一个我能做的把戏？

滚动时图像文本更改

.bg-container {
  position: fixed;
  top: -30px;
  left: 0;
  width: 100px;
  height: 100px;
}

.gradient-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 200px;
  background-image: linear-gradient(to bottom, rgb(100, 182, 240) 15%, rgb(81, 155, 244));
  transform: skewY(-15deg);
}

.scroll-content {
  position: absolute;
  top: 50px;
}

.scroll-content p {
  color: #000;
  mix-blend-mode: overlay;
}

/*hack for iOS*/
.scroll-content p:after{
    content: '\200c'
}
<div class="bg-container">
  <div class="gradient-background">
    &nbsp;
  </div>
</div>
<div class="scroll-content">
  <p> abc 1 </p>
  <p> abc 2 </p>
  <p> abc 3 </p>
  <p> abc 4 </p>
  <p> abc 5 </p>
  <p> abc 6 </p>
  <p> abc 7 </p>
  <p> abc 8 </p>
  <p> abc 9 </p>
  <p> abc 10 </p>
  <p> abc 11 </p>
  <p> abc 12 </p>
  <p> abc 13 </p>
  <p> abc 14 </p>
  <p> abc 15 </p>
  <p> abc 16 </p>
  <p> abc 17 </p>
  <p> abc 18 </p>
  <p> abc 19 </p>
</div>

*编辑 1：更改了我的示例片段代码。背景渐变不仅仅是一个矩形 div。它有点倾斜，这就是让它如此困难的原因。所以文本在边界处变成了两种色调。

*为清楚起见，编辑 2：我希望文本在白色背景上时为黑色（#000 纯色），在渐变/图像上时为白色（#FFF 纯色）。我的内容是可滚动的文本，如代码示例中所示。

*编辑 3：iOS Safari 不兼容，除非您执行以下 hack。为每个文本元素添加零宽度空间&#8203 ;以使其工作。这可以通过我在 CSS 标记中添加的 CSS 属性轻松完成。

4

3 回答 3

5

您可以使用渐变为文本着色。诀窍是让这个渐变与你的形状相似（形状边缘的度数和颜色变化相同）。由于您的倾斜元素是固定的，因此您需要使渐变也固定以创建文本滚动的神奇效果：

.gradient-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100px;
  height: 200px;
  background-image: linear-gradient(to bottom, rgb(100, 182, 240) 15%, rgb(81, 155, 244));
  transform: skewY(-15deg);
  transform-origin:left;
}

.scroll-content {
  position: absolute;
  top: 50px;
  /* 165deg = 180deg - 15deg   */
  background: linear-gradient(165deg, #fff 195px,#000 195px) fixed;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
<div class="gradient-background">
</div>
<div class="scroll-content">
  <p> abc 1 </p>
  <p> abc 2 </p>
  <p> abc 3 </p>
  <p> abc 4 </p>
  <p> abc 5 </p>
  <p> abc 6 </p>
  <p> abc 7 </p>
  <p> abc 8 </p>
  <p> abc 9 </p>
  <p> abc 10 </p>
  <p> abc 11 </p>
  <p> abc 12 </p>
  <p> abc 13 </p>
  <p> abc 14 </p>
  <p> abc 15 </p>
  <p> abc 16 </p>
  <p> abc 17 </p>
  <p> abc 18 </p>
  <p> abc 19 </p>
</div>

于 2019-02-23T20:16:43.900 回答
2

你可以用一些javascript来做到这一点：

$(document).ready(function() {
  $(window).scroll(function() {
    var bgHeight = $('.bg-container').height();
    var scroll = $(window).scrollTop();
    $('.scroll-content p').each((i, el) => {
      var pPos = $(el).offset().top;
      var pHeight = $(el).height();

      if (pPos < (scroll - pHeight + bgHeight)) {
        $(el).removeClass('black');
        $(el).addClass('white');
      } else {
        $(el).addClass('black');
        $(el).removeClass('white');
      }
    });
  })
})
.bg-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
}

.gradient-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-image: linear-gradient(to bottom, rgb(1, 55, 124) 15%, rgb(81, 155, 244));
}

.scroll-content {
  position: relative;
  z-index: 99999;
  font-family: neuzeit-grotesk, sans-serif;
  font-weight: 700;
}

.white {
  color: #fff;
}

.black {
  color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bg-container">
  <div class="gradient-background">
    &nbsp;
  </div>
</div>
<br/><br/><br/><br/><br/><br/>
<div class="scroll-content menu_black">
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
</div>

于 2019-02-23T06:53:25.657 回答
1

您可以使用 JavaScript 进行测量并将样式应用于您想要的范围内的标签，但您也可以做一些非常简单的事情来使文本可读（这属于“我可以做的一些其他技巧”）：

.scroll-content {
  text-shadow: 0 0 3px white;
}

这只会在蓝色背景上显示，并在白色背景上消失。不过，这确实取决于您想要达到的效果。

即使使用 JavaScript 实现，您也可以考虑将其用于渐进增强（对于无 JS 的用户）。

于 2019-02-23T05:46:45.737 回答