vue设置页面背景及背景图片简单示例
更新时间：2023年08月11日 11:43:39 作者：liyinchi1988
这篇文章主要给大家介绍了关于vue设置页面背景及背景图片的相关资料,在Vue项目开发中我们经常要向页面中添加背景图片,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
本地静态图片
<template>
<view class="max">
<image src="../../static/bg.png" mode=""></image>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.max{
image{
z-index:-1;
width:100%;
height:100%;
position: fixed;
top:0;
}
}
</style>cdn图片
<template>
<view class="">
<view class="max">
<image
src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-59f27697-00c5-4f1e-8c67-bb56e1e19e78/653c2495-cb7b-49a7-b6cb-f048e16fa5a7.jpg"
mode=""
></image>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.max{
image{
z-index:-1;
width:100%;
height:100%;
position: fixed;
top:0;
}
}
</style>设置背景色
<template>
<view class="container"> //最外层
<view class="bg-colore"></view> //此标签为最外层view标签的第一个子标签
<view class="content"></view>
</view>
</template>
<script>
</script>
</style>
.bg-colore{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #f4f4f4;
z-index: -1;
}
<style>实战-PC web登录页
实战-小程序登录页
<template>
<view class="container">
<image class="bg-img" :src="imgSrc"></image>
<view class="content"></view>
</view>
</template>
<script>
export default {
name: "index",
data() {
return {
imgSrc: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-59f27697-00c5-4f1e-8c67-bb56e1e19e78/653c2495-cb7b-49a7-b6cb-f048e16fa5a7.jpg',
}
}
}
</script>
<style>
.bg-img {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
</style>
总结
到此这篇关于vue设置页面背景及背景图片的文章就介绍到这了,更多相关vue设置页面背景及图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue如何判断组件进入可视区域问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了vue实现表单未编辑或未保存离开弹窗提示功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-04-04
最近遇到一个需求,需要把内容下载生成pdf文件,但转换过程中内容总是会被截断,就很难受,从网上找到了解决办法分享给大家,这篇文章主要给大家介绍了关于vue生成pdf文件步骤及pdf分页隔断处理的相关资料,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了vue.js实现标签页切换效果，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-06-06
这篇文章主要为大家详细介绍了vue滚动tab跟随切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
这篇文章主要介绍了如何开发Vite3插件构建Electron开发环境,文中给大家提到了如何让 Vite 加载 Electron 的内置模块和 Node.js 的内置模块，需要的朋友可以参考下2022-11-11
前端的数据均是通过接口请求拿到的，而Vue本身不支持ajax请求，那么该怎么解决Vue中的异步请求呢？这儿提供了几种方法，希望对大家有所帮助2022-05-05
这篇文章主要为大家介绍了vue2使用eventbus踩坑解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
这篇文章介绍了vue实现消息无缝滚动效果的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
下面小编就为大家分享一篇vue实现图片滚动的示例代码(类似走马灯效果)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
最新评论