如何在div的所有内容中应用淡出效果(不是动画)？

Question

我想要一些css或其他技术让我垂直淡化div的内容从顶部的正常外观到底部的完全白色(或任何颜色).不是动画,只是静态效果.

我找到了淡化背景的方法,例如Colorzilla的Gradient Editor

但我希望这种效果适用于div的所有内容(文本,图像等),如叠加层.如果我必须使其固定宽度,那是可能的.如果我真的必须修复垂直高度,那我可能会以某种方式被黑客入侵.我希望它的宽度和高度都很灵活.

Answer 1

您可以使用CSS(没有图像或额外标记),使用::before伪元素作为叠加层,以及linear-gradient使用rgba()不透明度的渐变0来实现此目的1.这假设您不需要<div>单独单击元素,因为叠加可以防止这种情况.

演示:http://jsfiddle.net/ThinkingStiff/xBB7B/

输出:

CSS:

#overlay {
    position: relative;
}

#overlay::before {
    background-image: linear-gradient( top, 
            rgba( 255, 255, 255, 0 ) 0%, 
            rgba( 255, 255, 255, 1 ) 100% );
        background-image: -moz-linear-gradient( top, 
            rgba( 255, 255, 255, 0 ) 0%, 
            rgba( 255, 255, 255, 1 ) 100% );
        background-image: -ms-linear-gradient( top, 
            rgba( 255, 255, 255, 0 ) 0%, 
            rgba( 255, 255, 255, 1 ) 100% );
        background-image: -o-linear-gradient( top, 
            rgba( 255, 255, 255, 0 ) 0%, 
            rgba( 255, 255, 255, 1 ) 100% );
        background-image: -webkit-linear-gradient( top, 
            rgba( 255, 255, 255, 0 ) 0%, 
            rgba( 255, 255, 255, 1 ) 100% );
    content: "\00a0";
    height: 100%;
    position: absolute;
    width: 100%;
}

HTML:

<div id="overlay">
    <span>some text</span><br />
    <img src="http://thinkingstiff.com/images/matt.jpg" width="100" /><br />
    <p>some more text</p>
</div>