将容器边缘的文本淡化为透明答案

【问题标题】：Fade off text at edge of container into TRANSPARENT将容器边缘的文本淡化为透明
【发布时间】：2014-12-23 16:32:50
【问题描述】：

恐怕我已经知道了这个问题的答案，但为了确定：

有没有什么方法可以淡出容器边缘溢出的文本，而容器后面没有纯色？

到目前为止，我已经找到了涉及使用从透明到某种颜色的线性渐变的解决方案。该解决方案起作用的先决条件是在容器后面有一个纯色背景，以便渐变的外端可以与背景融为一体：

但是，这是我想做的：

如您所见，我没有纯色背景，所以这里没有选择。

有什么建议吗？

【问题讨论】：

标签： css text overflow transparent fade

【解决方案1】：

也许一种方法会使用This，但这仅适用于-webkit-：

.container {
  width: 800px;
  height: 400px;
  background: url('http://lorempixel.com/400/800/city');
  position: relative;
}
.container div {
  font-size: 17px;
  font-family: 'verdana';
  background: rgba(0, 0, 0, .3);
  width: 30%;
  height: 80%;
  position: absolute;
  left: 10%;
  top: 10%;
  color: white;
  padding: 20px;
  box-sizing: border-box;
}
.container div span {
  display: block;
  background: -webkit-linear-gradient(#fff, transparent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<div class="container">
  <div>
    <span>Suspendisse potenti. Fusce nec volutpat nibh. Aenean molestie pharetra augue eget tristique. Aenean pellentesque est sed nunc tincidunt vulputate. Nullam sed consectetur erat. Morbi quis condimentum nisl, eget tempor nulla. Donec nec aliquam erat. </span>
  </div>
</div>

【讨论】：

哇，非常好的解决方案！问题是，与下面的答案一样，如果调整浏览器窗口的大小或放大视图，没有人可以预测文本可能会中断的位置。不过，可以通过使用渐变的色标来缓解这种情况。

【解决方案2】：

您可以将底部文本换成span，并将color 更改为rgb 和opacity

body {
  background: url(http://placeimg.com/640/480/any);
}
p {
  width: 220px;
  background: rgba(0, 0, 0, 0.7);
  padding: 20px;
  color: white;
}
p span:nth-of-type(1) {
  color: rgba(255, 255, 255, 0.8);
}
p span:nth-of-type(2) {
  color: rgba(255, 255, 255, 0.5);
}
p span:nth-of-type(3) {
  color: rgba(255, 255, 255, 0.2);
}
p span:nth-of-type(4) {
  color: rgba(255, 255, 255, 0.0);
}

<p>penatibus et magnis dis parturient
  <br>montes, nascetur ridiculus mus.
  <br>Donec quam felis, ultricies nec,
  <br>pellentesque eu, penatibus et
  <br>magnis dis parturient montes,
  <br>nascetur ridiculus mus. Donec
  <br>quam felis, ultricies nec nec,
  <br><span>pelpenat penatlen eu, penatibusf,</span>
  <br> <span>pelpenat penatlen eu, penatibusf,</span>
  <br> <span>pelpenat penatlen eu, penatibusf,</span>
  <span>pelpenat penatlen eu, penatibusf,</span>

  <br>
</p>

【讨论】：

这种方法是有道理的，但由于无法预测文本可能在哪里以及如何中断，例如浏览器窗口被调整大小或放大，这不能用于溢出的文本。