css - 使用透明 div 淡出部分底部的文本，但在覆盖 div 后高度保持在部分下方

Question

我试图在一段文本的底部获得一个漂亮的淡出效果作为“阅读更多”指示器。

我一直在关注 this和其他教程，我目前的代码如下:

html

<section>
    <p>malesuada fames ac turpis egestas...leo.</p>                                                                  
    <p>malesuada fames ac turpis egestas...leo.</p>
    <div class="fadeout"></div>
</section>
<p>Stuff after</p>

CSS

.fadeout {
    position: relative; 
    bottom: 4em;
    height: 4em;
    background: -webkit-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    ); 
} 

jsFiddle

问题是，即使我将透明 div 放在文本正文上，4em 的空间仍然存在于“其他内容”之间。

有什么想法吗？

Answer 1

2020 年答案:

这种效果现在可以通过真正的 alpha 透明度来实现，而不需要用额外的 <div> 覆盖底部。 .只需使用 CSS mask-image具有从 black 渐变的线性渐变的属性至 transparent .浏览器应该为您处理剩下的事情。演示:

.container {
  -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  height:  150px;
  width: 300px;
  overflow-y: scroll;
}
body {
  background: #09f;
  transition: background 0.5s ease-out;
}
body:hover {
  background: #f90;
}

<div class="container">
  <p>Mouse in/out of this demo or scroll down to see that it's true alpha! <br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed nisl id lectus viverra faucibus. Cras sed est sit amet turpis placerat consequat. Vestibulum viverra accumsan nisl a dapibus. Quisque mollis porta dictum. Praesent dictum non nisl at rutrum. Nam sem orci, efficitur quis faucibus non, aliquam eget est. In nec finibus ex, quis tristique augue. Duis tristique turpis a nunc sodales tincidunt.</p>
  <p>Morbi vehicula nisi ut lacus ornare, ac tincidunt sapien pellentesque. Aliquam gravida id dolor eget volutpat. In hac habitasse platea dictumst. Aenean ac enim eros. Vivamus augue nunc, interdum vitae pellentesque nec, interdum non turpis. Quisque viverra eget nibh in varius. Vivamus vel euismod velit. Vivamus suscipit lorem et porttitor gravida. Donec non nulla nulla. Duis eget dui sed urna eleifend sagittis.</p>
</div>

这种方法最好的部分是它是真正的透明，而不是通过用与背景相匹配的颜色覆盖文本来伪造它。这允许滚动和背景图像!我更改悬停时的背景颜色以证明它是真正透明的。

Browser support is pretty solid , IE 除外。