使用CSS实现网格+渐变背景色的Web页面背景

jcLee95

已于 2022-05-02 12:45:30 修改

阅读量1.4k

点赞数 2

分类专栏： css、sass

于 2021-05-30 23:12:30 首次发布

本文链接：https://blog.csdn.net/qq_28550263/article/details/117407401

版权

前端 css vue.js

css、sass 专栏收录该内容

15 篇文章 3 订阅

订阅专栏

使用CSS实现网格+渐变背景色的Web页面背景

CSDN：jcLee95
邮箱：291148484@163.com
本文地址：https://blog.csdn.net/qq_28550263/article/details/117407401

相关文章推荐：

Vue中使用纯CSS实现全屏网格加渐变色背景布局：https://blog.csdn.net/qq_28550263/article/details/117408879

【提示】：本文中’Out[]:'代表代码对应的运行结果。

先建立一个html架子：

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>纯CSS实现网格+渐变背景色的Web页面背景</title>
	</head>
	
	<body>
	    <!--这里是第一层div，用来放网格-->
	    <div class="bdgrid">
	        <!--这里是第二层div，用来放渐变背景色-->
	        <div class="bdkgc"></div>
	    </div>
	</body>
</html>

我们的思路很简单，先是在一个DIV中制作网格：

background:
/* 水平条纹 */
-webkit-linear-gradient(top, transparent 10px, #F0F0F0 10px, #cdcdcd 12px,transparent 12px, transparent 69px, #F0F0F0 60px),
/* 垂直条纹 */
-webkit-linear-gradient(left, transparent 10px, #F0F0F0 10px, #cdcdcd 12px,transparent 12px, transparent 69px, #F0F0F0 60px)
;

-webkit-background-size: 41px 41px;
-moz-background-size: 41px 41px;
background-size: 41px 41px;
;
margin: 0;
-webkit-background-size: 20px 20px;
-moz-background-size: 20px 20px;
background-size: 20px 20px;

同时在另外一个DIV中制作渐变色：

width: 100%;
height: 100%;
background-image: linear-gradient(#000327, #000214 ,#000752,#000a77 ,#000752);
-webkit-background-size:100% 100%;
-moz-background-size: 100% 100%;
background-size: 100% 100%;
opacity: 0.7;        /* 透明度 */

为了使得周围不留白，必须手动设置body的内边距为0：

body{
    margin: 0;
}

最后就是：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>纯CSS实现网格+渐变背景色的Web页面背景</title>
<style>
body{
    margin: 0;
}

.bdgrid{
	background:
	/* 水平条纹 */
	-webkit-linear-gradient(top, transparent 10px, #F0F0F0 10px, #cdcdcd 12px,transparent 12px, transparent 69px, #F0F0F0 60px),
	/* 垂直条纹 */
	-webkit-linear-gradient(left, transparent 10px, #F0F0F0 10px, #cdcdcd 12px,transparent 12px, transparent 69px, #F0F0F0 60px)
	;
	
	-webkit-background-size: 41px 41px;
	-moz-background-size: 41px 41px;
	background-size: 41px 41px;
	;
	margin: 0;
	-webkit-background-size: 20px 20px;
	-moz-background-size: 20px 20px;
	background-size: 20px 20px;
}

.bdkgc{
	opacity: 0.7;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(#000327, #000214 ,#000752,#000a77 ,#000752);
	-webkit-background-size:100% 100%;
	-moz-background-size: 100% 100%;
	background-size: 100% 100%;

}
</style>
</head>
<body>
  <!--这里是第一层div，用来放网格-->
  <div class="bdgrid">
    <!--这里是第二层div，用来放渐变背景色-->
    <div class="bdkgc"></div>
  </div>
</body>
</html>