Css溢出隐藏的div褪色

Question

这是我想要achieve的东西。

类似于this *的东西，但这是通过使用颜色褪色。

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

.something {overflow：hidden;宽度：100px; }

我想让div不透明，而不是颜色。有可能吗？

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，我需要它在文本溢出的底部淡出。我的解决方案（在Chrome 63和Firefox 57中测试）：

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

[编辑]在浏览器中更好的支持：

以上在Microsoft Edge中不起作用，所以我做了一些挖掘。这在iOS上的Microsoft Edge，Firefox，Chrome，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。