Vue中使用纯CSS实现全屏网格加渐变色背景布局
现在，我们先看一看项目结构：
接下来我们就在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>
