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

Question

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

我已经找到淡化背景的方法，例如Colorzilla's Gradient Editor

但我希望这种效果适用于 div 的所有内容(文本、图像等)，就像叠加层一样。如果我必须让它固定宽度，那是可能的。如果我真的必须修复垂直高度，我想那可能会被黑客攻击。我希望它的宽度和高度灵活。

Answer 1

您可以使用 ::before 使用 CSS(没有图像或额外标记)来做到这一点覆盖层的伪元素，以及 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>