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"><imagesrc="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 解决无法设置滚动位置的问题
问题描述在实现锚点定位的时候发现无法设置滚动条的位置. 在Vue中,使用 document.body.scrollTop=952 无法设置滚动条的高度. document.body.scrollTo ...
vue设置页面的高度100%
1.设置全局页面高度在vuecli init的默认工程里面,App.vue 页面中加 //App.vue 页面中 <style>html,body,#app{height: 100%;b ...
vue设置页面title
vue默认的title是项目的名称,需要进行修改,有两种方法. 方法一: 在 ./public/index.html 文件中直接修改. 方法二: 可以根据单个页面设置title. 打开设置路由(rou ...
vue 设置页面标题，微信公众号内嵌H5标题顶到顶部
一.安装 npm install vue-meta -S 二.配置main.js import Meta from "vue-meta"; Vue.use(Meta); 三.页面配 ...
vue设置页面标题title
每个页面设置相同标题 index.html 直接修改title标签里面的标题 (ps: 这个html文件中也可以引入一些js文件) 每个页面设置不同标题 router - index.js const ...
vue设置页面滚动高度_vue中获取滚动高度或指定滚动到某位置
1.点击某个标签,滚动到某个具体位置 switchHeight(num) { this.selectNum = num; if (num == 0) { document.getElementById ...
vue设置页面背景色
mounted() {document.querySelector('body').setAttribute('style', 'background-color:#f6f6f6')},beforeD ...
uni-app设置页面的背景图片
可以通过设置view的background或者background-image属性来实现: <template><view class="content" :st ...
Vue 设置背景图片样式
Vue 设置背景图片样式 CSS 效果图 CSS <style> body{background-image: url('./bg.jpg');background-size: cover ...

vue设置页面背景及背景图片

vue设置页面背景及背景图片相关推荐

最新文章

热门文章