<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>底部菜单颜色渐变</title>
<style type="text/css">
*{margin: 0px ;padding: 0px;}
.lanren .title {
height: 130px;
line-height:130px;
width: 100%;
position: absolute;
bottom: 0px;
background-image: -webkit-linear-gradient(top, rgba(255,255, 255, 0) 0%, rgba(100,100, 100, 0.3) 100%);
background-image: -moz-linear-gradient(top, rgba(255,255, 255, 0) 0%, rgba(100,100, 100, 0.3) 100%);
background-image: -o-linear-gradient(top, rgba(255,255, 255, 0) 0%, rgba(100,100, 100, 0.3) 100%);
background-image: linear-gradient(top, rgba(255,255, 255, 0) 0%, rgba(100,100, 100, 0.3) 100%);
}
</style>
</head>
<body>
<div class="lanren">
<div class="title"></div>
</div>
</body>
</html>这个采取了底部贴底，宽度100 的底部颜色从上到下的由白色到黑色 由全透明 到全不透明的黑色30%的颜色渐变说明
