当前位置 博文首页 > jcLee95的博客：使用CSS实现网格+渐变背景色的Web页面背景
CSDN：jcLee95
邮箱：291148484@163.com
【提示】：本文中’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>
最后的效果如图：
