首页 > 编程知识 正文

vue动态修改css样式,vue添加背景图片

时间:2023-05-06 12:08:00 阅读:126837 作者:4961

原始class属性设置背景样式

. bannerP {

位置: absolute;

top: 0;

left: 2.96rem;

right: 0;

bottom: 0;

ack ground : URL (././assets/img/background p.jpg ) no-repeat center; //本地静止图像路径

背景大小: cover;

}

用JavaScript动态修改背景图像

首先,在html中将style设置为作为动态绑定的style

在JavaScript方法中,可以通过更改绑定的bacImage来动态更改背景属性。

mounted () }

let imageName='mobile' //手机终端

//通过浏览器判断终端是手机(true )还是PC (false ),动态切换背景图像

if (! this.$store.state.isMobile ) {

imageName='web' //pc浏览器

this.bacimage={ background image : ' URL (https://rdet-OSS-test.OSS-cn-Hangzhou.aliyuncs.com/admin/staaaaa

}

else {

this.bacimage={ background image : ' URL (https://rdet-OSS-test.OSS-cn-Hangzhou.aliyuncs.com/admin/staaaaa

}

(,

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。