html - Bootstrap 弹出窗口中的淡入淡出文本

Question

我目前正在设计一个 Bootstrap 弹出窗口，允许用户对页面的某个方面发表评论。评论将被保存并发布到弹出窗口的上半部分。此弹出窗口有两个部分 - 标题中的评论和评论部分。顶部的评论必须在底部淡出。它应该是这样的:

http://i.imgur.com/QRaCd7g.png

这是我当前的样式:

http://i.imgur.com/M4DAnEX.png

这是我当前的标记(硬编码评论)

<div>
    <div class="popover-title comment-popover-title">
        <div class="popover-title-header">
            ANDREW BARNETT
        </div>
        <div class="popover-title-content">
            Lorem ipsum dolor sit amet, his cu nominavi laboramus, cam impedit intellegam eu. Mel iudico adversarium ex, ut est choro.
        . 
        .
        .      
        .
    </div>

    <div class="popover-content comment-popover-content">
        <textarea class="popover-textarea" placeholder="Type a comment" onkeyup="Domain.Common.textCounter(this, '.count', 200);"></textarea>
        <div class="count">Remaining Characters: 200</div>
        <button type="submit" class="btn btn-default save-button save-button-inline-comment">SUBMIT</button>
    </div>
</div>

知道如何做到这一点吗？尝试对背景进行渐变，但我需要一些内容来覆盖文本。不确定，让我知道您的想法!

Answer 1

我不得不稍微修改一下您的 HTML 结构(并提供有效的 CSS)，但这是我的尝试:

HTML:

<div>
    <div class="popover-scroller">
        <div class="popover-title comment-popover-title">
            <div class="popover-title-header">
                ANDREW BARNETT
            </div>
            <div class="popover-title-content">
                Lorem ipsum dolor sit amet, his cu nominavi laboramus, cam impedit intellegam eu. Mel iudico adversarium ex, ut est choro.
            </div>
        </div>
    </div>
    <div class="popover-fade"></div>
    <div class="popover-newcomment">            
        <div class="popover-content comment-popover-content">
            <textarea class="popover-textarea" placeholder="Type a comment" onkeyup="Domain.Common.textCounter(this, '.count', 200);"></textarea>
        <div class="count">Remaining Characters: 200</div>
        <button type="submit" class="btn btn-default save-button save-button-inline-comment">SUBMIT</button>
    </div>
</div>

CSS:

* {
    background: #202020;  
    color: #ffffff;
}

.popover-scroller {
    overflow-y: scroll;
    width: 10em;
    height: 5em;
}

.popover-fade {
    position:relative;
    height: 1em;
    bottom: 1em; /* same as the height */
    background: linear-gradient(rgba(32,32,32,0), rgba(32,32,32,255));
    width: 10em; /* same as the scroller width */
}

最大的缺点是阴影覆盖在底部的滚动条上，但希望这能让您走上正轨。