html5的颜色的渐变的问题

最新推荐文章于 2024-06-20 11:21:40 发布

milijiangjun

最新推荐文章于 2024-06-20 11:21:40 发布

阅读量3.9k

点赞数 1

分类专栏： # html5

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

版权

html5 专栏收录该内容

232 篇文章 4 订阅

订阅专栏

<!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%的颜色渐变说明

milijiangjun

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
html5的颜色的渐变的问题

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;底部菜单颜色渐变&lt;/title&gt; &lt;style type="text/css"&gt; *{margin: 0p
复制链接

扫一扫

专栏目录