在带有透明div的部分底部淡出文本，但是在覆盖div后高度保持在部分下 [英] Fading out text at bottom of a section with transparent div, but height stays under section after overlaying div

问题描述

我想在文本的一部分的底部获得一个很好的淡出效果作为阅读更多指标。

I'm trying to get a nice fade-out effect at the bottom of a section of text as a 'read more' indicator.

我一直关注这个和其他教程，我的代码目前如下：

I've been following a bit off this and other tutorials, and my code currently is as follows:

<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

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的空间仍然存在于'Other Stuff。

The problem is, even when I position the transparent div over the body of text, the 4em's of space still exists between and 'Other Stuff.'

任何想法？

推荐答案

从正常的html流中删除，所以如果你移动它保留的初始空间仍然保留，但是绝对定位不是这样的

A relatively position element is not removed from the normal html flow, so if you move it around the initial space reserved for it still remains, however with absolute positioning this is not the case

.fadeout {
    position: absolute; 
    bottom: 0em;
    width:100%;
    height: 4em;
    background: -webkit-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    ); 
    background-image: -moz-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: -o-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: -ms-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
} 
section {position:relative}     

DEMO

这篇关于在带有透明div的部分底部淡出文本，但是在覆盖div后高度保持在部分下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！