Vue中使用纯CSS实现全屏网格加渐变色背景布局

---

CSDN：jcLee95
邮箱：291148484@163.com

本文地址：https://blog.csdn.net/qq_28550263/article/details/117408879

---

假设你已经在Node.js后端创建了一个基本的vue项目框架，如果不会的话可以先参考这篇文章：
https://blog.csdn.net/qq_28550263/article/details/117408874
。

同时本文参考了我的另外一篇博客：
https://blog.csdn.net/qq_28550263/article/details/117407401

现在，我们先看一看项目结构：

接下来我们就在App.vue中，随页面背景进行更改。

我们需要在<template></template>下建立两个div，一个用于绘制网格，另一个用于绘制渐变背景色：

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

  </div>
</div>

为了不改变你的原有内容，直接把原内容放在最里层即：

<template>
<div class="bdgrid">
<!--这里是第二层div，用来放渐变背景色-->
 <div class="bdkgc">
   
  <img src="./assets/logo.png">
  <div>
    <p>
      If Element Plus is successfully added to this project, you'll see an
      <code v-text="'<el-button>'"></code>
      below
    </p>
    <el-button type="primary">el-button</el-button>
  </div>
  <HelloWorld msg="Welcome to Your Vue.js App"/>

</div>
</div>
</template>

然后使用css来绘制：

body{
    margin: 0;
}

.bdgrid{
  height:100%;
  width:100%;
  background-size: 100% 100%;
  position:fixed;
  margin: 0;

	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;
	;
	
	-webkit-background-size: 20px 20px;
	-moz-background-size: 20px 20px;
	background-size: 20px 20px;
}

.bdkgc{
	opacity: 0.9;
	width: 100%;
	height: 100%;
    position:fixed;
	background-image: linear-gradient(#060d4d, #010738 ,#000752,#040736 ,#010429);
	-webkit-background-size:100% 100%;
	-moz-background-size: 100% 100%;
	background-size: 100% 100%;
}

其中，项目生成时自带了一段写法很“蠢”的样式：

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

这里的margin-top: 60px;将使得整个页面上方将有一个60px的内边距而不能实现全屏，如图：

在不希望改变原内容位置的条件下我们可以再加一层div：

<template>
<div class="bdgrid">
<!--这里是第二层div，用来放渐变背景色-->
<div class="bdkgc">
  <!--这里是第三层div，其margin属性不在影响背景-->
<div class="ctn">
  <img src="./assets/logo.png">
  <div>
    <p>
      If Element Plus is successfully added to this project, you'll see an
      <code v-text="'<el-button>'"></code>
      below
    </p>
    <el-button type="primary">el-button</el-button>
  </div>
  <HelloWorld msg="Welcome to Your Vue.js App"/>

</div>
</div>
</div>
</template>

对应的#app改为：

.ctn {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

现在我们就可以看到想要的样子了，如图：

这部分.Vue文件的完整代码如下：

<template>
<div class="bdgrid">
<!--这里是第二层div，用来放渐变背景色-->
<div class="bdkgc">
  <!--这里是第三层div，其margin属性不在影响背景-->
<div class="ctn">
  <img src="./assets/logo.png">
  <div>
    <p>
      If Element Plus is successfully added to this project, you'll see an
      <code v-text="'<el-button>'"></code>
      below
    </p>
    <el-button type="primary">el-button</el-button>
  </div>
  <HelloWorld msg="Welcome to Your Vue.js App"/>

</div>
</div>
</div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>

body{
    margin: 0;
}

.bdgrid{
  height:100%;
  width:100%;
  background-size: 100% 100%;
  position:fixed;
  margin: 0;

	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;
	;
	
	-webkit-background-size: 20px 20px;
	-moz-background-size: 20px 20px;
	background-size: 20px 20px;
}

.bdkgc{
	opacity: 0.9;
	width: 100%;
	height: 100%;
  position:fixed;
	background-image: linear-gradient(#060d4d, #010738 ,#000752,#040736 ,#010429);
	-webkit-background-size:100% 100%;
	-moz-background-size: 100% 100%;
	background-size: 100% 100%;
}

.ctn {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>