我有一个包含一些内容的div,我希望文本淡化效果在底部。为此,我必须在position: fixed;
div
内overflow-y:scroll
使用Serializer.statementsToN3(destination);
不会出现提供淡入淡出效果的div。我尝试了不同的解决方案,但没有一个在div内部工作。
以下是代码的jsFiddle示例
答案 0 :(得分:2)
我会尝试使用absolute
定位。类似的东西:
.outer {
height: 200px;
border: 2px solid black;
position: relative;
overflow: hidden;
}
.content {
height: 100%;
overflow: scroll;
}
.fadeout {
width: 100%;
height: 40px;
position: absolute;
display: block;
bottom: 0;
left: 0;
z-index: 1;
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(95%, rgba(255, 255, 255, 1)));
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%);
background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%);
background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0);
}
请注意,我将overflow: scroll
放在.content
而不是.outer
上,以防止模糊滚动。
使用fixed
定位会将模糊放置在用户视口的底部,而不是元素。