Question

我想创建一个具有特定大小的列表，但它的内容可能比列表大。

我认为如果列表中有项目并且它们在底部和顶部逐渐消失，同时具有包含列表的容器的背景图像，那将是非常好看的。事实证明这比预期更难，而且我很难找到适合这种事情的指南。

下面的图片显示了预期的结果

enter image description here

这甚至可能吗？提前谢谢。

修改

我查看了this和this，但我无法使用这些技巧，因为背景中有背景图片，而不是纯色

Answer 1

我能够一起得到一个丑陋的原型。此仅适用于-webkit- browsers （Chrome，Safari等），但它可能会指向正确的方向，并帮助您进行调整以使其与浏览器兼容。

＆＃13;

.con{background:#0f0; color:#fff;}
ul{margin:0; padding:0; list-style:none; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom,  from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));}

＆＃13;

<div class="con">
    <ul>
    	<li>thing1</li>
    	<li>thing2</li>
    	<li>thing3</li>
    	<li>thing4</li>
    	<li>thing5</li>
    	<li>thing6</li>
    </ul>
</div>

＆＃13;

Answer 2

通过jQuery将不透明度应用于元素非常简单。以此为例。我们有以下标记：

<ul id="derp">
    <li>One</li>
    <li>One</li>
    <li>One</li>
    <li>One</li>
    <li>One</li>
    <li>One</li>
</ul>

现在使用以下jQuery，我们可以将不透明度应用于元素。

jQuery(document).ready(function(){

    var count = jQuery("#derp li ").length;
    var interval = (10 / count) / 10;
    var newval = 1.0;

    jQuery("#derp li").each(function(i, item){
        if(i == 0) {
            newval = newval;
        } else {
            newval = parseFloat(newval) - parseFloat(interval);
        }
        jQuery(item).css('opacity', (newval));
    });

});

JSFiddle Example

Answer 3

您只需使用HTML和CSS即可 - 在内容上应用div并为其提供渐变背景：

在OP的评论之后

更新。

HTML：

<div id = "body">
    <div id = "frame"></div>
        <div id = "content">
        ITEM<br/>
        ITEM<br/>
        ITEM<br/>
        ...
        </div>
</div>

CSS

#body {
    width:300px;
    height:300px;
    position:relative;
}
#frame {
    position:absolute;
    top:0;
    left:10%;
    width:80%;
    height:80%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 0.9));
}
#content {
    background:#eaeaea;
    width:100%;
    height:100%;
    text-align:center;
}

FIDDLE

淡化div中文本的底部或顶部

3 个答案: