@H_502_1@我试图在一段文本的底部获得一个很好的淡出效果作为“更多阅读”指标。
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}