html
<div class="racetm" :style="{backgroundImage: ‘url(‘ + (coverImgUrl ? coverImgUrl : baseImg) + ‘)‘, backgroundSize:‘100% 100%‘, backgroundRepeat: ‘no-repeat‘}"> </div>
画重点
backgroundSize:‘100% 100%‘ 背景图片大小 必须这么写 x轴 y轴 才能100覆盖
backgroundRepeat: ‘no-repeat‘ 背景图片不重复
script 动态赋值
<script> export default { name: "racehome", data(){ return{ baseImg: require(‘../../assets/images/other/campain_bg.jpg‘), coverImgUrl: ‘‘, } }, methods:{ _getracerule(){ getracerule({id: this.id},{‘token‘:Cookies.get(‘token‘),‘platform‘: ‘web‘}).then((data)=>{ this.rule=data.rule; this.coverImgUrl = data.bg_url; }) }, } </script>
css
.racetm width: 100% height:100%; background:#fff
原文地址:https://www.cnblogs.com/dudu123/p/10234518.html
时间: 2024-10-16 09:32:56