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设置页面背景及图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
基于Vue3+西瓜视频播放器(xgplayer)移动端直播解决方案
在现代前端开发中,视频播放功能越来越常见,从在线教育到娱乐平台都离不开高质量的视频播放器,这篇文章主要介绍了基于Vue3+西瓜视频播放器(xgplayer)移动端直播的相关资料,需要的朋友可以参考下2026-02-02
本文主要介绍了vite构建项目并支持微前端，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
这篇文章主要为大家详细介绍了vue iview封装模态框的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了如何解决ElementPlus的el-table底白线问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
vue-cli创建项目时由esLint校验导致报错或警告的问题及解决
这篇文章主要介绍了vue-cli创建项目时由esLint校验导致报错或警告的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
最近做了个项目需要做数字滚动增加的效果，刚开始接到这个项目还真是懵了，后来发现实现代码很简单的，下面小编给大家带来了vue 实现数字滚动增加效果的实例代码，需要的朋友参考下吧2018-07-07
下面小编就为大家分享一篇Vue-路由导航菜单栏的高亮设置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
vue深拷贝的三种实现方式：1、通过递归方式实现深拷贝；2、JSON.parse(JSON.stringify(obj))；3、jQuery的extend方法实现深拷贝,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧2023-11-11
这篇文章主要为大家整理了Vue3的8种和Vue2的12种组件通信的使用方法，文中的示例代码讲解详细，对我们学习Vue有一定的帮助，值得收藏2023-04-04
这篇文章主要为大家详细介绍了vue实现上传图片添加水印的升级版，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
最新评论