内容上下边缘的透明度渐变

Question

我目前正在处理一个页面，它几乎完成了。但有一件事让我很困扰。我有一个带有滚动条和大量文字和图片的内容 div (670x400px)。当我滚动时，有时文本被切成两半，在边缘有一行半个字母。我附上了我的意思的图片。

http://imageshack.us/photo/my-images/195/unbenannt1fll.jpg/

我现在想做的是让边缘淡出。我想到了一些想法，例如在此处放置白色渐变或透明度或使用 jquery 的东西，然后搜索了几个单词，但我没有找到任何有用的东西，而且我自己也想不出一些东西。我希望你能理解我的问题并帮助我。

编辑：

我添加了一张我想要创建的（照片处理过的）图片。

http://imageshack.us/photo/my-images/339/unbenannt1qo.jpg/

Answer 1

抱歉格式化，但这里是从白色到透明的背景渐变的相关 css。那应该做你需要的。

编辑

通过使用绝对定位在包含 div 中的 :before 伪元素，可以在不添加第二个元素的情况下执行此操作。这在 IE7 中不起作用。 Here's 一个小提琴来演示

.gradient{
    position:relative;
}

.gradient:before{
position:absolute;
content: " ";
top:0;
width:100%;
height:20px;
z-index:1;
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */

}

Answer 2

您可以使用 css3 渐变轻松做到这一点（以及 IE 6-9 的过滤器后备）

活生生的例子：

http://jsfiddle.net/kdQ4y/ 或 http://jsfiddle.net/kdQ4y/1/

使用http://www.colorzilla.com/gradient-editor/生成的渐变代码

html结构

<div class="wrap">
   <div class="top"></div>
   <div class="content">Content here</div>
   <div class="bottom"></div>
</div>

css（并非全部都是必需的）

.wrap{
    margin:40px;
    position:relative;
    padding:10px;
}

.content{
    height:100px;
    overflow-y:scroll;
}​

.top,.bottom {
    height:40px;
    width:100%;
    position:absolute;
    left:0;
    z-index:10;
}

.top{
    top:0;
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */

}

.bottom {
    bottom:0;
background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

}