CSS 线性淡出 div、内容和边框（顶部实心到底部透明）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12779776/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Linear fade out div, content and border (solid at top to transparent at bottom)
提问by Not loved
Possible Duplicate:
Is it possible to graduate the opacity of an HTML element?
可能的重复：
是否可以调整 HTML 元素的不透明度？
I am trying to get a div (and its border and contents) to fade into transparency (ie solid at the top and transparent at the bottom) using css.
我正在尝试使用 css 使 div（及其边框和内容）淡入透明（即顶部为实心，底部为透明）。
Is there a way to do this?
有没有办法做到这一点？
Ive been able to fade the background out with the following:
我已经能够使用以下方法淡出背景：
.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;
}
but haven't been able to find a way to do it to the content/border of the div as well. perhaps with some kind of nesting or an overlay?
但一直无法找到一种方法来处理 div 的内容/边框。也许有某种嵌套或覆盖？
EDITheres what I was trying to do:
编辑继承人我试图做的事情：
回答by Giona
Quoting from my answer here:
Check this working demo, and try to add/remove contents from #contents
检查这个工作演示，并尝试添加/删除内容#contents
HTML
HTML
<div id="container">
<div id="contents">
Some contents goes here
</div>
<div id="gradient">
</div>
</div>
CSS
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%);
}?
This will work almost in any browser which supports opacity (including IE9), and here's the IE8 "rgba" fallback (untested):
这几乎适用于任何支持不透明度的浏览器（包括 IE9），这里是 IE8 的“rgba”回退（未经测试）：
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
To generate your own gradient, visit Colorzilla.
要生成您自己的渐变，请访问Colorzilla。
The first stop (0%) must have opacity 0 ( rgba(255,255,255,0);), then around 70% - do some tests to find what's good for you - add another stop with opacity 1 ( rgba(255,255,255,1);).
第一站 (0%) 的不透明度必须为 0 ( rgba(255,255,255,0);)，然后是大约 70% - 做一些测试以找出对您有利的地方 - 添加另一个不透明度为 1 ( rgba(255,255,255,1);) 的站。
回答by xception
If you know the height you can use that knowledge to your advantage, you can always update it from js though, but this seems a bit simpler to me than defining countless gradients http://jsfiddle.net/6cXRZ/4/you can adjust your parameters to hide however much you like
如果你知道高度，你可以利用这些知识来发挥你的优势，你可以随时从 js 更新它，但这对我来说似乎比定义无数渐变要简单一些http://jsfiddle.net/6cXRZ/4/你可以调整你的参数隐藏多少你喜欢
