CSSのオーバーフロー隠しdivのフェーディング

Question

これは私がachieveにしたいものです。

this *と似たようなものですが、色を使用して色あせています。

 

<div class="something"> 
    <div class="inside"> 
    <p>Long wordingggggggggggggggggggggggggggggggggggg</p> 
    </div> 
</div> 

.somethingを{オーバーフロー：隠されました。幅：100ピクセル。 }

私は色の代わりに、不透明度のフェードを作りたいと思っています。それは可能ですか？

Answer 1

.wrapper{ 
 
background: orange; 
 
} 
 
.big-font{ 
 
font-size: 25px; 
 
} 
 
.fade-right { 
 
background: -webkit-linear-gradient(right, rgba(0,0,0,0), rgba(0,0,0,1)); 
 
-webkit-background-clip: text; 
 
-webkit-text-fill-color: transparent; 
 
} 
 
.fade-left { 
 
background: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,1)); 
 
-webkit-background-clip: text; 
 
-webkit-text-fill-color: transparent; 
 
} 
 
.fade-up { 
 
background: -webkit-linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0)); 
 
-webkit-background-clip: text; 
 
-webkit-text-fill-color: transparent; 
 
} 
 
.fade-down { 
 
background: -webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1)); 
 
-webkit-background-clip: text; 
 
-webkit-text-fill-color: transparent; 
 
} 
 
     

<div class="wrapper"> 
 
<p class="big-font fade-right">Long wordingggggggggggggggggggggggggggggggggggg</p> 
 
<p class="big-font fade-left">Long wordingggggggggggggggggggggggggggggggggggg</p> 
 
<p class="big-font fade-up">Long wordingggggggggggggggggggggggggggggggggggg</p> 
 
<p class="big-font fade-down">Long wordingggggggggggggggggggggggggggggggggggg</p> 
 
</div>

Answer 2

私は、テキストボックスを持っています。高さは4emに設定されています。テキストがオーバーフローする部分の下部にフェードアウトする必要がありました。上記動作しません

：使用の

.fade-text .fade-text-gradient::before { 
    mix-blend-mode: screen; 
    content: ''; 
    display: block; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: linear-gradient(180deg,transparent 50%, #fff 100%); 
    pointer-events: none;  
} 
.fade-text .fade-text-gradient { 
    display: inline-block; 
    position: relative; 
    color: #000; 
    background: #fff; 
    mix-blend-mode: multiply; 
} 

例：ブラウザで

<div class="fade-text"> 
    <div class="fade-text-gradient" style="height:4em;overflow:hidden"> 
    <span>Insert text here - enough to overflow the div</span> 
    </div> 
</div> 

[EDIT]さらに良いサポート私の解決策は、（クローム63とFirefox 57でテスト）マイクロソフトエッジでは、もっと掘り下げました。これは、Microsoft Edge、Firefox、Chrome、iOSのSafari、AndroidのSamsung Internetでテストされています。それは動作し、さらに簡単です：使用の

.fade-text { 
    background-image: linear-gradient(180deg, #000 70%, transparent 100%); 
    color:transparent; 
    -webkit-background-clip: text; 
    background-clip: text; 
} 

例：

<div class="fade-text" style="width:150px;height:150px;overflow:hidden"> 
    Put enough text here to overflow the div 
</div> 

テキストを透明にフェード、したがって、あなたがその背後にある任意の背景色を置くことができます。しかし、背景色を直接追加するのではなく、代わりに別のdivを配置し、背景色を設定します。