线性淡出div,内容和边框(顶部为实心,底部为透明)

Question

可能重复:
是否可以研究HTML元素的不透明度？

我试图使用css将div(及其边框和内容)淡入透明度(即顶部为实心,底部为透明).

有没有办法做到这一点？

我已经能够通过以下方式淡出背景:

.fade-to-nothing
{
    background-image: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,1)), to(rgba(255,255,255,0)));
    background-image: -webkit-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
    background-image: -o-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
    background-image: linear-gradient(to bottom, rgba(255,255,255,1),rgba(255,255,255,0));
    background-repeat: repeat-x;
}

但是也无法找到一种方法来对div的内容/边框进行操作.也许有某种嵌套或叠加？

编辑 继承我试图做的事情:

Answer 1

引用我的回答:

检查此工作演示,并尝试添加/删除内容#contents

HTML

<div id="container">
    <div id="contents">
        Some contents goes here
    </div>
    <div id="gradient">
    </div>
</div>

CSS

#container {
    position:relative;
}
#contents {
    background:red;
}
#gradient {
    position:absolute;
    z-index:2;
    right:0; bottom:0; left:0;
    height:200px; /* adjust it to your needs */
    background: url(data:image/svg+xml;base64,alotofcodehere);
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 70%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(70%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
    background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
}?

这几乎可以在任何支持不透明度的浏览器中工作(包括IE9),这里是IE8"rgba"后备(未经测试):

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );

要生成自己的渐变,请访问Colorzilla.

第一站(0%)必须具有不透明度0(rgba(255,255,255,0);),然后大约70% - 做一些测试以找到对你有用的东西 - 用不透明度1(rgba(255,255,255,1);)添加另一个停止点.