直接设置背景图片

1、在data中声明背景图片相关配置

export default {data () {return {// 顶部导航背景图片配置background: {// 背景图片地址backgroundImage: 'url(' + require('../../../static/img/person/temp1.png') + ')',// 背景图片是否重复backgroundRepeat: 'no-repeat',// 背景图片大小backgroundSize: 'cover',// 背景颜色backgroundColor: '#000',// 背景图片位置backgroundPosition: 'center top'}}}
}

2、在vue中引用

 <div :style="background" class="bgBackground"></div>

3、设置背景图片的宽高

.bgBackground{width:100%;
height:150;
}

动态设置背景图片

1、在data中声明背景图片相关配置和切换背景图片的条件

<script>
export default {data () {return {lessonActive: true, // 我的课程激活lessonDeactive: false, // 我的课程未被激活initLesson: { // 我的课程未被激活backgroundImage: 'url(' + require('../../../static/img/person/play.png') + ')'},activeLesson: { // 我的课程激活backgroundImage: 'url(' + require('../../../static/img/person/play1.png') + ')'}}
}
</script>

2、在vue中引用
判断lessonActive是否为true,为true则显示激活条件下的图片，反之显示未激活下的图片

  <i :style="{backgroundImage:(lessonActive?activeLesson.backgroundImage:initLesson.backgroundImage)}"></i>

vue中设置背景图片的方式相关推荐

在vue中设置背景图片
在vue中设置背景图片在App.vue中将样式中默认的margin-top 改为0,使得页面顶部不留白 #app {font-family: 'Avenir', Helvetica, Arial, ...
vue使用设置背景图片的方式实现淡入淡出轮播图2
首先放一份,我调试完美运行的代码: <!DOCTYPE html> <html><head><meta charset="utf-8"&g ...
Vue中设置背景图片和透明度
如果文章对你有帮助欢迎[关注❤️❤️❤️点赞
echarts热力背景图_Echarts 图表中设置背景图片
在项目开发过程中,遇到在Echarts图表上添加背景图的需求,通过查找Echarts官网的配置项,发现 graphic 能够实现在图表中设置背景图片. image 在Echarts的实例中,找到一个实 ...
Echarts图表中设置背景图片
Echarts 图表中设置背景图片在项目开发过程中,遇到在Echarts图表上添加背景图的需求,通过查找Echarts官网的配置项,发现 graphic 能够实现在图表中设置背景图片. graphi ...
如何给html文件加背景图片,怎么在文件夹中设置背景图片
在文件夹中设置美丽的背景图片,可以让你的电脑显得与众不同,下面是学习啦小编给大家整理的一些有关在文件夹中设置背景图片的方法,希望对大家有帮助! 在文件夹中设置背景图片的方法打开你要设置背景的文件夹, ...
Vue项目中设置背景图片
在Vue项目开发中我们经常要向页面中添加背景图片,可是当我们在样式中添加了背景图片后,编译打包后,配置到服务器上时,由于路径解析的问题,图片并不能够正确的显示出来,如下CSS样式: backgroun ...
Vue 中动态绑定背景图片（三种情况）
1.服务端返回图片链接 <divclass="bg-img":style="{ backgroundImage: `url(${imgUrl})` }" ...
Vue之设置背景图片
放置背景图片路径: 设置背景图片 <template><div class="background"><img :src="imgSrc&q ...

vue中设置背景图片的方式

vue中设置背景图片

直接设置背景图片

动态设置背景图片

vue中设置背景图片的方式相关推荐

最新文章

热门文章