css – 淡出带有透明div的部分底部的文本,但是在覆盖div之后高度保持在部分之下

前端之家收集整理的这篇文章主要介绍了css – 淡出带有透明div的部分底部的文本,但是在覆盖div之后高度保持在部分之下前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_502_1@我试图在一段文本的底部获得一个很好的淡出效果作为“更多阅读”指标。

我一直关注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,0) 0%,rgba(255,1) 100%
    ); 
}

jsFiddle

问题是,即使我将透明div放在文本主体上,4em的空间仍然存在于’Other Stuff’之间。

有任何想法吗?

解决方法

相对位置元素不会从正常的html流中删除,所以如果你移动它仍然保留为它保留的初始空间,但是绝对定位不是这种情况
.fadeout {
    position: absolute; 
    bottom: 0em;
    width:100%;
    height: 4em;
    background: -webkit-linear-gradient(
        rgba(255,1) 100%
    ); 
    background-image: -moz-linear-gradient(
        rgba(255,1) 100%
    );
    background-image: -o-linear-gradient(
        rgba(255,1) 100%
    );
    background-image: linear-gradient(
        rgba(255,1) 100%
    );
    background-image: -ms-linear-gradient(
        rgba(255,1) 100%
    );
} 
section {position:relative}

DEMO

原文链接:https://www.f2er.com/css/218063.html

猜你在找的CSS相关文章