vue设置页面背景及背景图片简单示例
作者：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设置页面背景及图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！