Question

我在另一个内部有两个DIV。

<div class="outside">
<div class="inside"></div>
</div>

外部div的填充量为20px。内部div有很多内容，可以滚动。是否可以使用CSS3的渐变（alpha？）功能使内部div的顶部和底部在滚动时淡入外部div？

或者我是否必须使用透明背景图像来实现这一目标？

Answer 1

我不这么认为。我认为你可以用插入的阴影来做到这一点，但我认为这不是你想要的效果：

body, .outside {
    background:#fff;
}
.inside {
    background:#ccf;
    box-shadow:0 -20px 20px 0px #fff inset; -moz-box-shadow:0 -20px 20px 0px #fff inset; -webkit-box-shadow:0 -20px 20px 0px #fff inset;
    height:100px;
    overflow:auto;
    width:200px;
}

Answer 2

你可以尝试这样的事情

#outside {
    background-image: -webkit-gradient(
      linear, right top, left top, from(rgba(255, 255, 255, 1.0)),
      to(rgba(255, 255, 255, 0))
    );

    background-image: -moz-linear-gradient(
      right center,
      rgba(255, 255, 255, 1.0) 20%, rgba(255, 255, 255, 0) 95%
    );
}

如果您需要多个渐变，则可能必须使用色标，并且您可以使用此工具执行此操作。 http://gradients.glrzad.com/

完成选择后，复制代码并用rgba（）替换rgb（），再添加1个值（在本例中为不透明度）。使用0表示完全透明。

祝你好运！

Answer 3

另一个答案，不是使用CSS3，但我确信这是你正在寻找的效果： http://www.cssplay.co.uk/menu/fade_scroll使用PNG / GIF而不是新的CSS属性，但它可以在浏览器中使用IE5。

Answer 4

您可以使用其他元素包围内部div，以便在正确的方向上呈现正确的渐变。

这可能与CSS 3

4 个答案: