线性淡出 div、内容和边框（顶部实心到底部透明）[重复]答案

【问题标题】：Linear fade out div, content and border (solid at top to transparent at bottom) [duplicate]线性淡出 div、内容和边框（顶部实心到底部透明）[重复]
【发布时间】：2012-10-08 10:23:13
【问题描述】：

可能重复：
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 的内容/边框。也许有某种嵌套或覆盖？

编辑这就是我想要做的事情：

【问题讨论】：

容器上有单色背景吗？相关：stackoverflow.com/questions/12664132/…
是的，背景对于 div 和它下面的内容都是纯色
您能否发布一张您所拥有的屏幕截图以及您想要实现的目标的图片？我发现你的公式很难弄清楚。

标签： css transparency

【解决方案1】：

引用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);) 的站点。

【讨论】：

也适用于图像。看看我的小提琴叉：jsfiddle.net/yw9v7zm5 ...我不必使用你的数据 URI 图像。
应该注意的是，这实际上并没有淡化为透明，它只是通过淡化到与背景相同的颜色来模仿这一点。例如，尝试更改小提琴中的主体背景颜色。同样在当前的浏览器中，您可能会选择使用伪元素而不是额外的 div 来执行此操作。
如果你真的想选择文本，那不是很实用
这并不是真正的淡入透明。它逐渐变成白色。如果你在容器 div 下面有一些东西，你会看到的。

【解决方案2】：

如果你知道高度，你可以利用这些知识来发挥你的优势，你总是可以从 js 更新它，但这对我来说似乎比定义无数渐变更简单http://jsfiddle.net/6cXRZ/4/ 你可以调整你的参数以隐藏多少你喜欢

【讨论】：