在滚动的梯度退色文本在背景顶部 [英] Gradient fading text on scroll on top of background

问题描述

一直在寻找一种淡化顶部和底部滚动的方法。
我知道你在顶部和底部使用2 png的方式，问题是，在纯色页面上滚动时，似乎只是有用。
但我希望它发生在有一个背景图像的页面上。

任何想法？如果它甚至可能？
JS，HTML5，CSS？

以下是描述效果的图片：

HTML

 < div class =wrap> 
< p> Lorem ipsum dolor sit amet，consectetuer adipiscing elit。 Aenean商品ligula eget dolor。 Aenean massa。 um。。。。。。。。。。。。。。。 Donec quam felis，ultricies nec，pellentesque eu，pretium quis，sem。 Nulla consequat massa quis enim。 Donec pede justo，fringilla vel，aliquet nec，vulputate eget，arcu。在enim justo，rhoncus ut，imperdiet a，venenatis vitae，justo。 Nullam dictum felis eu pede mollis pretium。整数tincidunt。 Cras dapibus。猕猴（Vivamus elementum semper nisi）。 Aenean vulputate elefend tellus。 Aenean leo ligula，porttitor eu，suffo vitae，eleifend ac，enim。 Aliquam lorem ante，dapibus in，viverra quis，feugiat a，tellus。 Phasellus viverra nulla ut metus varius laoreet。 Quisque rutrum。 Aenean imperdiet。 Etiam ultricies nisi vel augue。 Curabitur ullamcorper ultricies nisi。南方。 Etiam rhoncus。 Maecenas tempus，tellus eget condimentum rhoncus，sem quam semper libero，sit amet adipiscing sem neque sed ipsum。南方濒危物种保护委员会Maecenas nec odio et ante tincidunt tempus。 Donec vitae sapien ut libero venenatis faucibus。 Nullam quis ante。 Etiam sit amet orci eget eros faucibus tincidunt。 Duis leo。 Sed fringilla mauris坐在amet nibh。 Donec sodales sagittis magna。< / p> 
< div class =fader>< / div> 
< / div> 
  

CSS

  .wrap {
 position：relative; 
 background：url（http://lorempixel.com/output/fashion-q-c-640-480-3.jpg）; 
 font-family：Helvetica，'Helvetica Neue'，sans-serif; 
} 
 
 .wrap p {
 color：white; 
} 
 
 .fader {
 position：absolute; 
 top：0; 
 left：0; 
右：0; 
 bottom：0; 
 background：linear-gradient（top，rgba（0,0,0,0.7）0％，rgba（0,0,0,0）30％，rgba（0,0,0,0）70％ ，rgba（0,0,0,0.7）100％）; 
 background：-webkit-linear-gradient（top，rgba（0,0,0,0.7）0％，rgba（0,0,0,0）30％，rgba（0,0,0,0） ）70％，rgba（0,0,0,0.7）100％）; 
 background：-moz-linear-gradient（top，rgba（0,0,0,0.7）0％，rgba（0,0,0,0）30％，rgba（0,0,0,0） ）70％，rgba（0,0,0,0.7）100％）; 
 pointer-events：none; 
} 
  

编辑：添加 pointer-events：none 到CSS以允许正常的文本选择。

Been looking for a way to fade a scroll in top and bottom. I know the way where you use 2 png in top and bottom, problem is that only seems to be usefull when scroll in on a solid color page. But i want it to happen on page where the there is a background image..

Any ideas? if its even possible? JS, HTML5, CSS?

Here is a picture to describe the effect:

gradient text scroll http://i50.tinypic.com/2llbl8i.jpg

解决方案

This might be what you're looking for.

DEMO

JSFiddle

HTML

<div class="wrap">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.</p>
    <div class="fader"></div>
</div>​

CSS

.wrap {
    position: relative;
    background: url(http://lorempixel.com/output/fashion-q-c-640-480-3.jpg);
    font-family: Helvetica, 'Helvetica Neue', sans-serif;
}

.wrap p {
    color: white;
}

.fader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.7) 100%);
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.7) 100%);
    background: -moz-linear-gradient(top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.7) 100%);
    pointer-events: none;
}

Edit: Added pointer-events: none to CSS to allow normal text selection.

这篇关于在滚动的梯度退色文本在背景顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！