vue 单页面背景图片设置

html 部分，background 是放背景图片的div，front是放其他的div

<div class="background"><img :src="imgSrc" class="imgSrc"/>
</div>
<div class="front"></div>

js部分

export default {data() {return {imgSrc: require('@/assets/img/indexBI.jpg')}}
}

css部分

.background {width: 100%;height: 100%;/**宽高100%是为了图片铺满屏幕 */z-index: -1;position: absolute;
}.imgSrc{height: 100%;width: 100%;
}.front {width: 100%;height: 100%;z-index: 1;position: absolute;text-align: center;
}

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

vue单页面背景颜色设置
有时我们会遇到单独改变某个组件的背景填充色,而我们已经在index.html中引入了公用的css样式(body中设置了背景色),由于单个组件没有body标签,于是要修改单个组件的背景色只需添加如下代码 ...
vue单页面背景颜色修改
最近在做项目中,使用vue开发移动端项目,遇到一个小问题,路由跳转同时修改当前页面的背景色. 下面简单说一下vue单页面应用,由于vue的单页面应用导致我们的项目只有一个index.html文件,然而 ...
微信小程序页面背景图片设置
微信微信小程序页面背景图片background-image使用及大小设置源代码//index.wxss page{ background-size:100% 100%; background-ima ...
Vue:单页面应用动态设置title
vue开发的单页面应用,需要在进入不同路由时动态改变title vue-cli 3 构建的项目 1.修改public>index.html 修改title标签id为:public_title,后 ...
移动端也能兼容的web页面制作2：导航栏、背景图片设置
[ 导读 ] MDBootstrap 是基于 Vue.js 开发的一套前端框架,拥有美观大气的界面效果,友好的交互体验,更棒的是对于移动端也有很好的兼容性.先给大家看下演示 demo 的运行,后面将围 ...
Vue + element-ui 背景图片设置
Vue + element-ui 背景图片设置初学vue 看到其他网址都有些背景图片,于是试着自己也写了一下,表述不好请见谅实现效果以下是如何实现: 找到你想要设置背景图片的页面 data里设置 ...
html form背景图片设置,input 提交表单按钮背景图片的完美设置
import java.awt.*; import javax.swing.*; public class TestBackgroundColor extends JFrame { public s ...
php vue seo,处理 Vue 单页面 SEO 的另一种思路
(设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plugin形成更优的配合) 单页面应用在前端正大放光彩.三大框架 Angular.Vue.Rea ...
Vue 单页面应用把公共组件放在 app.vue 但是我希望某个页面没有这些公共组件怎么办???(比如登陆页面)
<div class="all" v-if="$route.path!=='/login'" > Vue 单页面应用把公共组件放在 app.v ...

vue 单页面背景图片设置

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

最新文章

热门文章