<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>底部菜单css3单色渐变至透明效果</title>
<style>
*{ margin:0; padding:0;}
.lanren{ width:600px; height:500px; background:url(images/lanren.jpg) no-repeat; margin:100px auto; position:relative;}
.lanren .title{ height:50px; line-height:50px; text-align:left; color:#fff; font-size:14px; padding:0 20px; position:absolute; left:30px; top:200px;
background-image: -webkit-linear-gradient(right, rgba(231,51, 104, 0) 0%, rgba(231,51, 104, 1) 100%);
background-image: -moz-linear-gradient(right, rgba(231,51, 104, 0) 0%, rgba(231,51, 104, 1) 100%);
background-image: -o-linear-gradient(right, rgba(231,51, 104, 0) 0%, rgba(231,51, 104, 1) 100%);
background-image: linear-gradient(right, rgba(231,51, 104, 0) 0%, rgba(231,51, 104, 1) 100%);
}
</style>
</head>
<body>
<script src="http://www.lanrenzhijia.com/demos/googlegg.js"></script><!-- 代码部分begin -->
<div class="lanren">
<div class="title">要显示的图片</div>
</div>
<!-- 代码部分end -->
</body>
</html>如图：
此为背景透明，div渐变的