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

Question

我试图在一段文本的底部获得一个很好的淡出效果作为"更多阅读"指标.

我一直在关注这个和其他教程,我的代码目前如下:

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

有任何想法吗？

Answer 1

2020年答案：

现在可以通过真正的 alpha 透明度来实现这种效果，而无需使用额外的<div>. 只需使用mask-image具有从black到渐变的线性渐变的 CSS属性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>

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

浏览器支持非常可靠，除了 IE。

Answer 2

相对位置元素不会从正常的html流中删除,所以如果你移动它仍然保留为它保留的初始空间,但是绝对定位不是这种情况

.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

Answer 3

来到派对的这个晚了,但是这也可以在没有.fadeoutdiv的情况下使用::before或使用::after伪元素:

        section {
            position: relative;
        }

        section::after {
            content: '';
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 15px;
            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%
            );
        }

Answer 4

简单添加.fade-out到您想要"淡出"的元素:

.fade-out {
  position: relative;
  max-height: 350px; // change the height
}
.fade-out:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: linear-gradient( rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100% );
}