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

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

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



【提示】:本文中’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>

最后的效果如图:

目录
相关文章
|
6天前
|
前端开发
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果(下)
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果
38 0
|
7天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
15 1
|
7天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
14天前
|
移动开发 前端开发
【通用CSS模板】移动端H5页面统一样式.css
【通用CSS模板】移动端H5页面统一样式.css
|
19天前
|
前端开发 开发者 容器
彻底学会CSS grid网格布局
【4月更文挑战第1天】 彻底学会CSS grid网格布局
15 0
|
19天前
|
自然语言处理 Java 数据库连接
掌握JSP页面编程:动态生成Web内容
【4月更文挑战第3天】Java Server Pages (JSP) 是一种用于创建动态Web内容的Java技术,它结合HTML并允许在页面中嵌入Java代码。JSP支持代码片段、表达式语言(EL)和JSTL标签库,简化动态内容生成。当服务器接收到请求时,执行JSP中的Java代码并将结果嵌入HTML返回给客户端。示例展示了如何显示当前日期和时间。JSP可与Servlet、JavaBeans、数据库等结合,用于构建功能丰富的交互式Web应用。
掌握JSP页面编程:动态生成Web内容
|
28天前
|
机器学习/深度学习 人工智能 前端开发
机器学习PAI常见问题之web ui 项目启动后页面打不开如何解决
PAI(平台为智能,Platform for Artificial Intelligence)是阿里云提供的一个全面的人工智能开发平台,旨在为开发者提供机器学习、深度学习等人工智能技术的模型训练、优化和部署服务。以下是PAI平台使用中的一些常见问题及其答案汇总,帮助用户解决在使用过程中遇到的问题。
|
1月前
|
前端开发 容器
CSS背景background八种属性
CSS背景background八种属性
|
1月前
|
设计模式 前端开发 Shell
Python生成Web页面Web框架
Python生成Web页面Web框架
16 0
|
1月前
|
前端开发
web前端开发-----CSS样式设置
web前端开发-----CSS样式设置
30 0