Question

This fiddle应该解释我的问题。我有一个溢出的容器：隐藏。我希望切割的内容被“平滑”切割。在切断之前，字体应该慢慢变得更加透明。我找到了一个解决方案，你可以在我的小提琴中看到。

我想知道与我的解决方案相比是否有更优雅的解决方案。现在有5个不同的透明度级别，但我想与至少10个不同级别一起工作。因此它会变得非常混乱。谢谢你的帮助！

简短的HTML / CSS-Sample，显示了这个小效果需要多少代码：

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);
}

检查 Fiddle

注意:::

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

Answer 2

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

在此网站上，您可以配置要制作的渐变。 http://www.colorzilla.com/gradient-editor/

希望这有帮助！

Answer 3

你的方法方式太复杂了！您只需使用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供参考。

Answer 4

基本渐变叠加可能只是要走的路。然而，为了科学，我试图从字面上回答你的问题并制作一个真正动态的透明文本叠加。

基本上，您可以在容器元素上设置渐变为透明的线性渐变背景（您可以调整这些渐变以使用CSS Gradient Generator获得所需的效果）。在下面的代码片段中，我将文字放在图片上，这样您就可以看到它是透明的文字，而不是覆盖图，使其看起来像淡出。

body { background: url('http://i.imgur.com/I5G6HaZ.jpg'); }

.container { 
  background: -webkit-linear-gradient(left, white, transparent); 
  width: 50%;
  -webkit-background-clip: text;
  overflow-x: hidden;
}

p {
  width: 20em;
  
  font-size: 24px;
  -webkit-text-fill-color: transparent;
}

<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.</p>
</div>

平滑溢出：隐藏

4 个答案:

注意:::

HTML：

小提琴：