我试图在一段文本的底部获得一个很好的淡出效果作为“更多阅读”指标。
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%
);
}
问题是，即使我将透明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}
