将容器边缘的文本淡化为TRANSPARENT

Question

我担心我已经知道了答案，但只是为了确定：

有没有办法淡化其容器边缘的溢出文本，而该容器后面没有纯色？

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

然而，这就是我想做的事情：

正如你所看到的，我没有纯色的背景，因此这里没有选择。

有什么建议吗？

Answer 1

也许aproach会使用This，但这只适用于-webkit-：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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