平滑溢出:隐藏

Question

这把小提琴应该解释我的问题。我有一个溢出的容器:隐藏。我要剪掉的内容，要切得“平稳”。字体在被切断之前应该慢慢变得更加透明。我找到了一个解决办法，你可以从我的小提琴里看到。

我想知道是否有一个比我的解决方案更优雅的解决方案。现在有5个不同的透明度级别，但我希望至少有10个不同的级别。所以会变得很混乱。谢谢你的帮忙!

简短的HTML/CSS-示例，它显示这种小效果需要多少代码：

HTML

<div id="transparencydiv">
    <div id="transparency1" class="transparencys"></div>
    <div id="transparency2" class="transparencys"></div>
    <div id="transparency3" class="transparencys"></div>
    <div id="transparency4" class="transparencys"></div>
    <div id="transparency5" class="transparencys"></div>

</div>

CSS

    #transparencydiv{
        position:absolute;
        top:45%;
        height:10%; width:100%;
    }
    .transparencys{
        float:right;
        height:100%;width:2ex;
        background-color:black;
        z-index:5;

    }
    #transparency1{opacity:0.9;margin-right:2%;}
    #transparency2{opacity:0.7;}
    #transparency3{opacity:0.5;}
    #transparency4{opacity:0.3;}
    #transparency5{opacity:0.1;}

http://jsfiddle.net/y049jbm8/

Answer 1

使用linear-gradient

#scrollmenu:after {
    content:" ";
    width:15%;
    position:absolute;
    right:0;
    top:0;
    height:100%;
    background-image: linear-gradient(to right, rgba(255,255,255,0), black);
}

检查小提琴

注：：

这将工作在最新的Chrome，以保持兼容性使用必要的前缀。您可以在这里查看更多信息，http://css-tricks.com/css3-gradients/

Answer 2

与多个div不同，您可以在文本上添加一个唯一的div，并以渐变作为背景。

在此站点上，您将能够配置要设置的渐变。http://www.colorzilla.com/gradient-editor/

希望这能有所帮助！

Answer 3

您的方法是way太复杂了！您只需使用CSS梯度即可：

HTML：

<div id="scrollmenu">
    <div id="arrow1"></div>
    <div id="content">
        <p>THIS CONTENT WILL SCROLL! Theres will always be a different word cut of in the end. somecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontent somecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontent</p>
        <div id="transparencydiv"></div>
    </div>
    <div id="arrow2"></div>
</div>

body, html {
    height:100%;
    width:100%;
}
* {
    padding:0;
    margin:0;
}
#scrollmenu {
    position:absolute;
    top:45%;
    height:10%;
    width:100%;
    overflow:hidden;
    white-space:nowrap;
    background-color:black;
    color:white;
}
#arrow1, #arrow2 {
    position:absolute;
    top:0;
    height:100%;
    width:2%;
    z-index:2;
    background-color:red;
}
#arrow1 {
    left:0;
}
#arrow2 {
    right:0;
}
#content {
    height:100%;
    margin-left:2%;
    position:relative;
    z-index:1;
}
#transparencydiv {
    background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 80%, rgba(0,0,0,1) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(80%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1)));
    background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 80%,rgba(0,0,0,1) 100%);
    background: -o-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 80%,rgba(0,0,0,1) 100%);
    background: -ms-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 80%,rgba(0,0,0,1) 100%);
    background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 80%,rgba(0,0,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=1 );
    height:100%;
    left:0;
    max-height:100%;
    position:absolute;
    top:0;
    width:100%;
}

小提琴：

这里有一个JSFiddle供参考。