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

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

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>


目录
相关文章
|
19天前
|
前端开发 开发者 容器
彻底学会CSS grid网格布局
【4月更文挑战第1天】 彻底学会CSS grid网格布局
16 0
|
1月前
|
前端开发
vue+ts或者react+ts如何使用animate.css
vue+ts或者react+ts如何使用animate.css
29 0
|
7天前
|
前端开发
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果(下)
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果
38 0
|
10天前
|
资源调度 前端开发 JavaScript
Tailwind CSS如何在vue项目中使用
Tailwind CSS如何在vue项目中使用
30 8
|
10天前
|
前端开发 开发者 容器
【掰开揉碎】详解 CSS3 Grid 布局
【掰开揉碎】详解 CSS3 Grid 布局
N..
|
29天前
|
前端开发 容器
DIV+CSS网页布局
DIV+CSS网页布局
N..
8 0
|
1月前
|
JavaScript
vue中如何实现全全全屏和退出全屏?
vue中如何实现全全全屏和退出全屏?
20 0
|
1月前
|
前端开发 UED 开发者
探索前端开发中的CSS布局技巧
本文将介绍一些在前端开发中常用的CSS布局技巧,包括盒模型、浮动布局、弹性布局和栅格系统等。通过学习这些技巧,开发者可以更加灵活地控制页面的布局,提升用户体验和界面的美观性。
|
1月前
|
前端开发 容器
CSS背景background八种属性
CSS背景background八种属性
|
1月前
|
前端开发 JavaScript
在Vue中,如何使用CSS过渡和动画来实现淡入淡出的效果?
在Vue中,如何使用CSS过渡和动画来实现淡入淡出的效果?
26 1