html底部边框线透明度,线性淡出div,内容和边框(顶部为实心,底部为透明)

Giona..

24

检查此工作演示,并尝试添加/删除内容#contents

HTML

Some contents goes here

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);)添加另一个停止点.