uniapp 设置背景图像

yfx000

已于 2023-02-23 15:56:11 修改

阅读量2.3k

点赞数 1

分类专栏：前端文章标签： uni-app vue.js 前端 Powered by 金山文档

于 2023-02-23 15:17:29 首次发布

本文链接：https://blog.csdn.net/yfx000/article/details/129182285

版权

前端专栏收录该内容

43 篇文章 0 订阅

订阅专栏

文章介绍了如何在uniapp中动态设置背景图片，包括使用url结合data属性绑定图片地址，以及设置背景颜色和大小，强调了动态设置的重要性以确保属性生效。

摘要由CSDN通过智能技术生成

uniapp设置背景图像方法如下，兼容android APP

<view class="outer"  :style="{background:  'url(' + APPSET.bgUrl + ') no-repeat '+APPSET.bgColor ,'background-size':bgsize }">
</view>

<script>
    export default {
        data() {
            return {               
                APPSET:{
                    'bgUrl' : 'http://****/bg_20221223000837A001.jpg',
                    'bgColor' : '#AAC8E0',
                    'bgsize' : '100% auto',
                },
               
            }
        }
    }
</script>

之所以要把背景的大小等其它属性也设置为动态，

是为了让渲染背景所有属性时，在同时渲染，这样才能对背景图像的大小进行有效控制。

否则可能设置到css里可能属性不生效。