Html 在具有透明 div 的部分底部淡出文本，但在覆盖 div 后高度保持在部分下方
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11837606/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fading out text at bottom of a section with transparent div, but height stays under section after overlaying div
提问by whunut
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 thisand other tutorials, and my code currently is as follows:
我一直在关注这个和其他教程，我的代码目前如下：
html
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
css
.fadeout {
position: relative;
bottom: 4em;
height: 4em;
background: -webkit-linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
}
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.'
问题是，即使我将透明 div 放在文本正文上，4em 的空间仍然存在于“其他内容”之间。
Any ideas?
有任何想法吗？
回答by Musa
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
相对位置元素不会从正常的 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}
回答by Marquizzo
Answer for 2020:
2020年答案：
This effect can now be achieved with true alpha transparency, without the need to cover the bottom with an additional <div>. Simply use the CSS mask-imageproperty with a linear gradient that fades from blackto transparent. The browser should take care of the rest for you. Demo:
现在可以通过真正的 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>The best part of this approach is that it's true transparency, instead of faking it by covering your text with a color that matches the background. This allows for scrolling and background images! I change the background color on hover to demonstrate that it's truly transparent.
这种方法最好的部分是它是真正的透明度，而不是通过用与背景匹配的颜色覆盖文本来伪造它。这允许滚动和背景图像！我在悬停时更改背景颜色以证明它是真正透明的。
Browser support is pretty solid, except for IE.
浏览器支持非常可靠，除了 IE。
回答by random_user_name
Came to this late to the party, but this can also be done without the .fadeoutdiv, using a ::beforeor ::afterpseudo-element:
参加聚会这么晚，但这也可以在没有.fadeoutdiv 的情况下完成，使用 a::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%
);
}
回答by Jeremy Lynch
Simple add .fade-outonto the element you want to "fade-out":
简单地添加.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% );
}
回答by Mintytail
Just replace bottom: 4emwith margin-top: -4em. Works perfect for me.
只需替换bottom: 4em为margin-top: -4em. 非常适合我。
