混合混合模式并不总是有效

Question

我正在尝试在可滚动块的底部实现渐进的文本淡入淡出效果。此外，此块后面必须有图像，因此仅在该块上放置颜色（不透明度）渐变是行不通的，必须使用 mix-blend-mode。
该块具有以下结构：

<div id="stage"><img ...></div>
<div class="layer">
  <h2>...</h2>
  <div class="text">
    <div class="scroll-box">
      <div class="container">...</div>
      ::after
    </div>
    <div class="scroll-tools">...</div>
  </div>
</div>

.container 包含一些文本。 .scroll-tools 包含自定义滚动条元素（导轨和拇指）。这里是 jsfiddle.

几乎所有东西看起来都应该如此。除了滚动条的轨道因为它是黑色而不可见并且 mix-blend-mode: screen 被应用到 .layer 和滚动条的拇指有错误的颜色。
为了排除滚动条被混合，我尝试将 mix-blend-mode 应用到 .scroll-box 但由于某种原因这不起作用。

问题1：是否可以在不影响滚动条的情况下实现与我的文本相同的效果？怎么样？
问题2：为什么mix-blend-mode应用于.scroll-box（或.text）时不起作用？

Answer 1

这个没有cross browser support但是玩起来很有趣

我认为它符合您的描述。

尽管如此，这并不是一个真正实用的答案。

.main {
  height: 200px;
  width:300px;
  margin:0 auto;
  text-align:justify;
}

.wrap {
  max-height: 100%;
  overflow: auto;
  padding:20px;
}

.inner {
  -webkit-mask-image: 
  
  linear-gradient(to top, rgba(0, 0, 0, 0)5%,/** <---- Use this to determine the cutoff point **/
  
  rgba(0, 0, 0, .25), rgba(0, 0, 0, .5), rgba(0, 0, 0, .75), rgba(0, 0, 0, 1))
}

<div class="main">
  <div class="wrap">
    <div class="inner">Lorem ipsum dolor sit amet, mel et timeam deseruisse. Ceteros repudiandae mel ad. Id tantas graece maiorum usu. Nonumes efficiendi ius te, ea harum dictas nam. Eos harum iriure regione ut. Est labitur iudicabit urbanitas et. Inermis verterem maiestatis
      duo ea, vix an nostrud veritus democritum, duo zril platonem ad. Cum aeque blandit appareat an, cum cu minim iusto, pro aperiam reformidans ne. Vix bonorum legimus cu, has iusto appareat eu. Etiam iracundia no has, quo velit definitiones an. Ne
      quo causae interesset scribentur, et pri affert dicant, est erant noster semper ei. Ea euismod antiopam electram ius, vero homero insolens ius ad, vel prima zril id. Ius te error apeirian. Vidisse intellegebat est eu, ut mea epicurei deserunt pertinacia,
      cu lorem atomorum eos. ipsum dolor sit amet, mel et timeam deseruisse. Ceteros repudiandae mel ad. Id tantas graece maiorum usu. Nonumes efficiendi ius te, ea harum dictas nam. Eos harum iriure regione ut. Est labitur iudicabit urbanitas et. Inermis
      verterem maiestatis duo ea, vix an nostrud veritus democritum, duo zril platonem ad. Cum aeque blandit appareat an, cum cu minim iusto, pro aperiam reformidans ne. Vix bonorum legimus cu, has iusto appareat eu. Etiam iracundia no has, quo velit
      definitiones an. Ne quo causae interesset scribentur, et pri affert dicant, est erant noster semper ei. Ea euismod antiopam electram ius, vero homero insolens ius ad, vel prima zril id. Ius te error apeirian. Vidisse intellegebat est eu, ut mea
      epicurei deserunt pertinacia, cu lorem atomorum eos.</div>
  </div>
</div>

Answer 2

混合模式：屏幕不是唯一的技巧。

你也可以使用强光。

使用这个，获得透明度的颜色是灰色。并且保留了白色和黑色

.test {
  width: 300px;
  height: 300px;
  mix-blend-mode: hard-light;
}

.box {
  width: 100px;
  height: 100px;
  background-color: white;
  display: inline-block;
}

.box:first-of-type {
  background-color: black;
}

.bkg {
  background-image: linear-gradient(to top, lightblue, tomato);
}

p {
  position: relative;
}


p:after {
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, transparent 20%, rgb(128, 128, 128) 80%);
}

<div class="bkg">
<div class="test">
<p>Lorem ipsum dolor sit amet, mel et timeam deseruisse. Ceteros repudiandae mel ad. Id tantas graece maiorum usu. Nonumes efficiendi ius te, ea harum dictas nam. Eos harum iriure regione ut. Est labitur iudicabit urbanitas et. Inermis verterem maiestatis</p><p>
</p><div class="box"></div>
<div class="box"></div>
</div>
</div>

混合混合模式并不总是有效

mix-blend-mode does not always work

css

mix-blend-mode