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

}

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

2 个答案: