uni-app背景图片 background-image，支持 base64 格式图片、支持网络路径图片、本地路径背景图片

雨点打透心脏的1/2处 2023-06-06 15:27 2阅读 0赞

### [背景图片][Link 1] ###

`uni-app` 支持使用在 css 里设置背景图片，使用方式与普通 `web` 项目相同，需要注意以下几点：

*  支持 base64 格式图片。
 *  支持网络路径图片。
 *  使用本地路径背景图片需注意：
    
    1.  图片小于 40kb，`uni-app` 会自动将其转化为 base64 格式；
    2.  图片大于等于 40kb， 需开发者自己将其转换为base64格式使用，或将其挪到服务器上，从网络地址引用。
    3.  本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径。
        
            .test2 {
                 background-image: url('~@/static/logo.png');
             }

**注意**

*  微信小程序不支持相对路径（真机不支持，开发工具支持）
 *  其他端使用本地背景图片作为背景图没有限制

###  解决图片因为高度而不能铺满的问题 ###

### base64 格式图片核心源码：（图片转换Base64：[http://imgbase64.duoshitong.com/][http_imgbase64.duoshitong.com]） ###

<template>
    	
    	<view class="content">
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    
    			}
    		},
    		onLoad() {
    
    		},
    		methods: {
    
    		}
    	}
    </script>
    
    <style lang="less">
    	.content {
    		background-image: url('data:image/gif;base64,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');
    		background-size: 100% 100%;
    		height: 100%;
    	}
    </style>

### 支持网络路径图片 ###

<template>
    	
    	<view class="content">
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    
    			}
    		},
    		onLoad() {
    
    		},
    		methods: {
    
    		}
    	}
    </script>
    
    <style lang="less">
    	.content {
    		background-image: url('http://seopic.699pic.com/photo/50055/5642.jpg_wh1200.jpg');//网络图片
    		backgruond-size:100% 100%;
    		height: 100%;
    	}
    </style>

[Link 1]: https://uniapp.dcloud.io/frame?id=%E8%83%8C%E6%99%AF%E5%9B%BE%E7%89%87
[http_imgbase64.duoshitong.com]: http://imgbase64.duoshitong.com/