Question

给定一个带有overflow：hidden的固定维度的矩形<div>并且只包含段落<p>，我试图添加一个“淡出”效果，这样当div向下滚动时，在虚拟橙色区域下滑动的段落的一部分（见下图）逐渐从底部到顶部淡出，反之亦然。这些段落需要保持可选。

我正在寻找一种简单的方法（最好只使用css，也许使用多个边框？）来实现这一目标。请注意：

内部框阴影将无效，因为该段落将位于其上
：after和：之前选择器不起作用，因为它们将使用段落
我希望使用带有线性渐变的box-image，但是包含的div已经有了赢得的边框（左，右和底）。

如果有办法让它在上述问题中发挥作用，请告诉我。感谢。

enter image description here

Answer 1

您可以使用以下内容：

div::before {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1;

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

'before'伪元素将位于<div>的顶部（更高的z-index）并且具有相同的比例（宽度和高度），因此您只需根据需要调整背景渐变

这种方法唯一的问题是<p>文本不可选，因为before元素覆盖了它...

Answer 2

这个plnkr完全符合您的需要，但它运行的是一个非常简单的JavaScript代码。

http://plnkr.co/edit/jKNy3lLSvuZh8cqivnzz?p=preview

我使用带有绝对定位div的包装器，背景上有渐变。 javascript只计算阴影div的滚动条大小，而不是覆盖它。

html代码：

db.collection(collectionName).aggregate([
    { "$group": {
        "_id": { 
            "item": "$item",
            "rating": { "$toLower": "$rating" }
        },
        "count": { "$sum": 1 }
    }},
    { "$group": {
        "_id": "$_id.item",
        "results": {
            "$push": {
                "rating": "$_id.rating",
                "count": "$count"
            }
        }
    }}
])

css代码：

{
    "_id": "item_1"
    "results":[
        { "rating": "good", "count": 12 },
        { "rating": "neutral", "count": 10 }
        { "rating": "bad", "count": 67 }
    ]
}

最后是javascript代码（取决于jquery）：

<div class="content-wrapper">
  <div class="content">
    <p>...</p>
    <p>...</p>
    <p>...</p>
  </div>
  <div class="top-shadow"></div>
  <div class="bottom-shadow"></div>
</div>

当向下滚动到包含div的边时，内部段落渐渐淡出

2 个答案: