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

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。那应该可以满足您的需要。

编辑

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

.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 */

}