平滑的overflow:hidden效果

Question

这个代码片段 可以解释我的问题。我有一个带有overflow:hidden属性的容器，我想要被截断的内容平滑地被截断。在截断之前，字体应该慢慢变得更加透明。我已经找到了一种解决方案，可以在我的代码片段中看到。

我想知道是否有比我的解决方案更优雅的解决方案。现在有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/

- user4311599

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浏览器，为了保持兼容性，请使用必要的前缀。您可以在这里了解更多信息。

- DaniP

---

我不明白为什么这个回复被标记为解决方案，因为使用这种方法，右箭头也会受到渐变的影响。 - Marventus

@Marventus，这个答案为OP提供了使用linear-gradient实现的指南...这不会影响箭头，右箭头也是用absolute定位，并且具有更高的z-index，因此它在::after元素的渐变上方...您可以发布一个完全相同的资源答案...linear-gradient。 - DaniP

没错，但是箭头应该设为 z-index:3，因为要使这个工作正常运行，由于 #content 有一个 z-index 值为1，你需要至少将 #scrollmenu:after 设置为 z-index:2，才能让 :after 伪元素可见！Fiddle链接: http://jsfiddle.net/Marventus/bgm63eeL/ - Marventus

@Marventus，由于OP fiddle元素具有静态位置，因此#content上的z-index值无效... 在您的fiddle中，更改这些content属性，然后z-index才起作用... 我不明白您在这个答案上垃圾评论的意义，这很好用....您回答我的17分钟后，OP发现它很有用。 - DaniP

我接受了这个解决方案，因为我永远不会只是从别人那里复制代码。即使有一点错误也无所谓。我只需要这些信息，而这篇文章包含了我想知道的一切。 - user4311599

Answer 2

你的方法太复杂了！你可以使用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%;
}

Fiddle:

这里有一个JSFiddle供参考。

- Marventus

Answer 3

不必使用多个div，您可以在文本上方添加一个带有渐变背景的独特div。

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

希望这能帮到您！

- DooKie

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>

- Barry T. Smith

---

我回来了，因为我的问题比我想象中要复杂得多。字体必须是透明的，而且背景也必须是透明的。因此，我不能使用线性渐变叠加。您提供的解决方案可以行得通，但字体的颜色也会改变。有时它将是黑色，有时则是白色。结果我无法使用您的解决方案。你有什么其他想法来解决这个问题吗？ - user4311599