线性淡出div、内容和边框（从顶部实线到底部透明）

Question

线性淡出div、内容和边框（从顶部实线到底部透明）

csstransparency

17

可能是重复问题：
有没有可能对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的内容/边框进行相似的操作。也许需要一些嵌套或覆盖层？

编辑这是我试图做的事情：

在这里输入图片描述

- undefined

你的容器背景是单色的吗？相关链接：https://dev59.com/M2nWa4cB1Zd3GeqPwQqw#12670548 - Giona

是的，背景颜色对于div和其下方的内容都是纯色的。 - undefined

1

请问您能否提供一下您所拥有的截图以及您想要实现的效果图？我发现您的表述让人很难理解。 - xception

2个回答

1

如果您知道高度，您可以利用这个知识来获得优势。虽然您可以随时从JS更新它，但是对我来说，这似乎比定义无数的渐变http://jsfiddle.net/6cXRZ/4/更简单。您可以调整参数以隐藏任意数量。

- xception

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Giona · Accepted Answer

以下是摘自我的回答的引用：

请查看这个演示，并尝试从#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);）。