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

我们需要在<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>

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

Vue中使用纯CSS样式设计Table横向竖向滚动自定义个别列固定
在Vue中CSS样式来设计Table横向竖向滚动自定义个别列表头固定前言一.表格数据二.样式设计 1.表格与外层DIV样式 2.固定表头的样式(重要) 总结前言大家一定使用过很多UI,UI都 ...
纯css自动全屏轮播图html代码,纯CSS3代码实现简单的图片轮播
以4张图片为例: 1.基本布局: 将4张图片左浮动横向并排放入一个div容器内,图片设置统一尺寸,div宽度设置4个图片的总尺寸,然后放入相框容器div, 相框设置1个图片的大小并设置溢出隐藏,以保证 ...
全屏css,CSS之全屏背景图
吐槽啦:Yeah 明天就是国庆了o(*￣▽￣*)o!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言 ...
Mac osx系统中virtual box 中的Ubuntu系统的全屏显示问题解决
Mac osx系统中virtual box 中的Ubuntu系统的全屏显示问题解决一安装virtualBox工具安装失败其他尝试方法一安装virtualBox工具选择Insert Gue ...
linux qt应用程序全屏,QT中MDI应用程序中更改子窗口大小或是全屏显示子窗口的方法...
1.QT中窗口部件QWidget成员函数showFullScreen();是用于将窗口部件全屏显示. 但是他只对窗口模式的部件有用.子窗口的特征是 Qt::SubWindow,不是独立的窗口.因此对其 ...
vue中使用hover.css动画
vue中使用hover.css动画介绍:一组 CSS3 驱动的悬停效果,可应用于链接.按钮.徽标.SVG.特色图像等.轻松应用于您自己的元素.修改或仅用于灵感.在 CSS.Sass 和 LESS 中 ...
Vue中如何进行数据可视化大屏展示
Vue中如何进行数据可视化大屏展示在现代数据驱动的应用程序中,数据可视化大屏已经成为了非常重要的一环.通过对海量数据进行可视化展示,可以帮助用户更好地理解和分析数据,从而做出更加明智的决策.在Vue ...
css显示全屏背景图片
css设置全屏背景图片 *{ margin: 0; padding: 0; } ...
css背景图片全屏显示加居中显示
css背景图片全屏显示加居中显示,屏幕过大平铺屏幕过小居中裁剪 div { background:url(/i/bg_flower.gif); background-size:cover; -moz ...

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

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

最新文章

热门文章