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

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

您也可以使用强光。

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

.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>

Answer 2

这没有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>

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

2 个答案: