码迷,mamicode.com
首页 > 其他好文 > 详细

vue 动态绑定背景图片

时间:2019-01-07 21:28:18      阅读:517      评论:0      收藏:0      [点我收藏+]

标签:重点   赋值   必须   100%   for   default   大小   图片   ima   

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

 

vue 动态绑定背景图片

标签:重点   赋值   必须   100%   for   default   大小   图片   ima   

原文地址:https://www.cnblogs.com/dudu123/p/10234518.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!