mix-blend-modeが動作しない場合があります

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があります。

ほとんどすべてが見えるように見えます。スクロールバーの線は黒で表示されず、.layerにmix-blend-mode: screenが適用され、スクロールバーの親指の色が間違っています。
は、私が.scroll-boxからmix-blend-modeを適用しようとしたブレンドされることから、スクロールバーを除外するにはいくつかの理由で、これは動作しません。

Question1：それはスクロールバーに影響を与えることなく、私の場合は、テキストと同じ効果を達成することは可能ですか？どうやって？
Question2：.scroll-box（または.text）に適用されたときmix-blend-modeが動作しないのはなぜ？

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

ブレンドモード：画面はボックス内の唯一のトリックではありません。

ハードライトを使用することもできます。

この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>