CSSで背景色にフェードアウト

Question

background-colorを子テキスト要素の線形勾配で再宣言することなく、親にbackground-colorのフェージングの影響を与える方法はありますか？私は、以下のような消えるテキスト効果が欲しい。私は多分何らかの種類のマスク、または不透明度のトリックを考えていました。それは背景色を継承することを利用することさえあるかもしれません。

同じHTML構造化されたdivのクラスが異なる複数の異なる背景色を持っているので質問しますが、両方の場所ですべての色を書き換えたくないので、更新を2回行います。

私はそれほど重要ではないと思うことを知っていますが、そうでないと確信できない限り、私はおそらく純粋なCSSの方法を探しています。あなたはこのソリューションを使用しますが、中にのみ動作することができます

body { 
 
    font-family: sans-serif; 
 
    color: #000; 
 
} 
 

 
.main { 
 
    height: 200px; 
 
    background-color: rgb(100,255,150); 
 
    padding: 20px; 
 
} 
 

 
.text { 
 
    background-color: inherit; 
 
    height: 100%; 
 
    margin: 0; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
p:before { 
 
    background: linear-gradient(to bottom, rgba(100,255,150,0.3) 60%, rgba(100,255,150,1)); 
 
    content: " "; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
}

<div class="main"> 
 
    <p class="text"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae massa nisl. Sed in dignissim felis. Integer eu quam id massa posuere auctor. Curabitur consectetur velit urna, sit amet laoreet dui congue nec. Sed commodo nisl ac viverra semper. Proin at porttitor purus. Sed pretium vel diam fringilla venenatis. Aenean imperdiet lacinia lectus at dignissim. Sed nulla ligula, mollis at justo vitae, dictum gravida nisi. Maecenas lacinia risus neque. Ut et ante vitae erat tincidunt finibus et sit amet nunc. Quisque tellus ante, euismod vel vestibulum ut, commodo sed justo. In pellentesque, felis a consectetur eleifend, odio ex dapibus lorem, sit amet suscipit orci lacus eu ligula. 
 

 
Fusce eget maximus ligula. Aenean eu mi et eros faucibus mattis. Sed bibendum hendrerit lorem, ut varius urna eleifend sit amet. Duis magna ex, auctor et commodo quis, posuere non purus. Nunc nec erat rutrum orci molestie volutpat. Suspendisse bibendum odio id ornare sodales. Nulla ornare libero ipsum, quis tempus odio molestie eu. Ut id libero mauris. Morbi vel tristique velit. Duis hendrerit erat dolor, sit amet euismod massa dictum nec. 
 
    </p> 
 
</div>

Answer 1

（私は彼らのために少しあまりにも多くのツールのように思える。私のチームのデザイナーがそのCSSの前のプロセッサを追加することで動作します） Chrome、Safari、Operaなど最新のブラウザの最新バージョンでは、Firefoxはこの機能を完全にサポートしていません。詳細についてはこちらを、この作品CanIuse

body { 
 
    font-family: sans-serif; 
 
    color: #000; 
 
} 
 

 
.main { 
 
    height: 200px; 
 
    background-color: rgb(100,255,150); 
 
    padding: 20px; 
 
} 
 

 
.text { 
 
    background-color: inherit; 
 
    height: 100%; 
 
    margin: 0; 
 
    overflow: hidden; 
 
    position: relative; 
 

 
    -webkit-mask-image: -webkit-gradient(linear, left top, 
 
    left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); 
 
    } 
 
}

<div class="main"> 
 
    <p class="text"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae massa nisl. Sed in dignissim felis. Integer eu quam id massa posuere auctor. Curabitur consectetur velit urna, sit amet laoreet dui congue nec. Sed commodo nisl ac viverra semper. Proin at porttitor purus. Sed pretium vel diam fringilla venenatis. Aenean imperdiet lacinia lectus at dignissim. Sed nulla ligula, mollis at justo vitae, dictum gravida nisi. Maecenas lacinia risus neque. Ut et ante vitae erat tincidunt finibus et sit amet nunc. Quisque tellus ante, euismod vel vestibulum ut, commodo sed justo. In pellentesque, felis a consectetur eleifend, odio ex dapibus lorem, sit amet suscipit orci lacus eu ligula. 
 

 
Fusce eget maximus ligula. Aenean eu mi et eros faucibus mattis. Sed bibendum hendrerit lorem, ut varius urna eleifend sit amet. Duis magna ex, auctor et commodo quis, posuere non purus. Nunc nec erat rutrum orci molestie volutpat. Suspendisse bibendum odio id ornare sodales. Nulla ornare libero ipsum, quis tempus odio molestie eu. Ut id libero mauris. Morbi vel tristique velit. Duis hendrerit erat dolor, sit amet euismod massa dictum nec. 
 
    </p> 
 
</div>