底部菜单4

最新推荐文章于 2020-11-27 16:43:25 发布

milijiangjun

最新推荐文章于 2020-11-27 16:43:25 发布

阅读量354

点赞数

分类专栏： # html5

本文链接：https://blog.csdn.net/milijiangjun/article/details/80984016

版权

html5 专栏收录该内容

232 篇文章 4 订阅

订阅专栏

<!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>