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

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中，随页面背景进行更改。

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

<div class="bdgrid">    <div class="bdkgc">  </div></div>

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

<template><div class="bdgrid"> <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="''"></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 class="bdkgc">  <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="''"></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 class="bdkgc">  <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="''"></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>