Question

我正在努力创建一个＆＃34;阅读更多＆＃34;当文本溢出其容器时淡出对文本的影响。当文本在纯色背景上时很容易。您可以使用与背景颜色相同的线性渐变透明度的叠加div。这使得文本看起来正在淡入背景

但是我的文字已经部分透明了。叠加层的透明度位于背景之上，使背景看起来随文本一起消失。这是问题的一个小问题：https://jsfiddle.net/b0p6Lozv/2/

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

这是代码

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

你能使用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 Exclusions引入的基本形状之一。

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

Answer 2

我希望的效果是让背景颜色保持一致在整个div中，文本逐渐淡出底部 div。是否可以在前景上创建渐变 div的颜色？

如果您希望前景色在一系列连续段落中淡出，是的。

您可以使用rgba颜色格式的Alpha通道透明度：

＆＃13;

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

＆＃13;

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

＆＃13;

当div具有部分透明背景时，是否有一种方法可以淡化div的文本

2 个答案: