可能是重复问题:
有没有可能对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的内容/边框进行相似的操作。也许需要一些嵌套或覆盖层?
编辑 这是我试图做的事情: