当 div 具有部分透明的背景时，有没有办法只淡化 div 的文本

Question

我正在尝试在文本溢出其容器时创建“阅读更多”淡化效果。当文本在纯色背景上时，这很容易。你可以有一个与背景颜色相同的线性渐变透明度的覆盖 div。这使它看起来文本正在淡入背景

但是我的文字已经在部分透明的背景上。叠加层的透明度叠加在背景之上，使背景看起来与文本一起淡化。这是问题的一个js小提琴：https://jsfiddle.net/b0p6Lozv/2/

我想要的效果是让背景颜色在整个 div 中保持一致，并使文本向 div 底部淡出。是否可以仅在 div 的前景色上创建渐变？感谢您的帮助！

这里是代码

<div class="pageBody">
<div class="wrapper">
  <div class='container'>
    <p>line1</p>
    <p>line2</p>
    <p>line3 line3 line3 line3</p>
    <p>line4</p>
   </div>
  <div class="overlay">
  </div>
</div>
</div>
<div class="pageBody">
<div class="wrapper2">
  <div class='container'>
    <p>line1</p>
    <p>line2</p>
    <p>line3 line3 line3 line3</p>
    <p>line4</p>
   </div>
  <div class="overlay2">
  </div>
</div>
</div>

.pageBody {
  background: black;
}
.wrapper {
  position: relative;
  background: rgba(255, 255, 255, 0.6);
}
.container {
  height: 100px;
  overflow: hidden;
}
.overlay {
  position: absolute;
  width: 100%;
  bottom: 0;
  height: 40px;
  background: linear-gradient(rgba(255, 255, 255, 0),        rgba(255, 255, 255, 0.6));

Answer 1

我想要的效果是背景颜色一致 整个 div 并让文本向底部淡出 分区。是否可以仅在前景上创建渐变 div 的颜色？

如果您希望前景色在一系列连续段落上淡出，可以。

您可以使用rgba 颜色格式的 alpha 通道透明度来做到这一点：

.container p:nth-last-of-type(3) {
color: rgba(0,0,0,0.6);
}

.container p:nth-last-of-type(2) {
color: rgba(0,0,0,0.4);
}

.container p:nth-last-of-type(1) {
color: rgba(0,0,0,0.2);
}

<div class='container'>
<p>line1</p>
<p>line2</p>
<p>line3 line3 line3 line3</p>
<p>line4</p>
</div>

Answer 2

你会使用 HTML5 吗？

摆脱覆盖 div 并仅使用 CSS 样式设置 .container div。

您可以使用剪切路径或蒙版。

面具

.container {
etc...
mask: url(mask.svg) top left / cover;
}

剪切路径

.container {
etc...  
  clip-path: url(#clippingPathImage);
}

clip-path 属性可以应用于所有 HTML 元素...一个 clipPath 元素或 CSS 排除项引入的基本形状之一。

更多信息： http://www.html5rocks.com/en/tutorials/masking/adobe/