Possible Duplicate:
Is it possible to graduate the opacity of an HTML element?
我正在尝试使用 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 的内容/边框执行此操作的方法。也许有某种嵌套或覆盖？
编辑
这是我想做的:
引自my answer here :
检查这个working demo ，并尝试从 #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);)。