Css溢出隐藏div褪色

Question

这是我想要的achieve。

与 this 类似的东西 *但是使用颜色会褪色。



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

.something { overflow:hidden; width: 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 中不起作用，因此我进行了更多挖掘。这已在 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 并设置背景颜色。

Css溢出隐藏div褪色

Css overflow hidden div fading

css

overflow

fade

fading