0

我正在尝试在可滚动块的底部实现渐变文本淡入淡出效果。此外，这个块后面必须有一个图像，所以简单地在这个块上放置颜色（不透明度）渐变是行不通的，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包含自定义滚动条元素（rail 和 thumb）。这是jsfiddle。

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

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

4

2 回答 2

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>

于 2017-06-26T18:33:35.933 回答
0

这没有跨浏览器支持，但玩起来很有趣

我认为它与您描述的相符。

话虽如此，这并不是一个真正的功能性答案。

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

于 2017-06-26T18:00:15.147 回答