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

最新推荐文章于 2024-07-03 15:34:14 发布

&XYZ&

最新推荐文章于 2024-07-03 15:34:14 发布

阅读量1.6w

点赞数

分类专栏： uni-app

本文链接：https://blog.csdn.net/JEFF_luyiduan/article/details/102516520

版权

uni-app 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

背景图片

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

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

注意

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

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

<script>
	// APP.vue文件
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style>
	/*每个页面公共css */
	*{
		font-size:16px;
	}
	/*解决图片因为高度而不能铺满的问题*/
	uni-page-body{
		height: 100%;
	}
	page{
		height: 100%;
	}
</style>

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

<template>
	<!-- test.vue 测试文件-->
	<view class="content">
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="less">
	.content {
		background-image: url('data:image/gif;base64,R0lGODlhpAHtAPZ/ACsrKx1NeCRSe09PT2psbBpViSRZiShgjTRjiiZmmDFsmjJxnylzozN4qER4nTmBqy+Gsy2QvTaUv3+AgE6Lr2aZtzihykOax0SmzVGkx0it0ki22Va42XWsyU2b5Fqj52qt52y16ni562nC31nE4mjL53rO7ZGSkpWmqqOkpLa2to63zoa965XE3KnK24jF7ZfH7pHP8IvV8Znc9aLN7qjY6bbb66rP8anZ8rna8pbl+7Hn76To+rrn9qzz+7nz+dLS0cja4cXf8srk7tTn7srp+Nrs+Mzz99f1+enp6PDy7ePu9+f1+Pn7+xhEbgUFBSV7sB5uph6CsxQ8aAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAQEAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAApAHtAAAH/oAsIiyEgiIgiCKDhIqHMDQwkTQ3QkVGRktLl5dFlUI5oKGhQp6Wm5uZTKlMrK1MTaxNsrKup7ZGlrm4uEW9vbzAur6+t7e5xLu+lbzKnc6epNE5n6LVN6DXN9qjy6e/Rq2zr+Gz5eLj5ueu6LSaQjeR8S/yMC+Fho2HjYj8/f7/ID4IHMhvUTwY10iZ6iUNGzxBBRux4EewBcJrOSDBEPTBg0BELGhMG4Ip0xJVq9aZxEVNG42XB7eBEkLoYDwW82xuFKHtxktKQjChzLSJVI6ePUVFQ3ZK08mU68ZJbaWp2LBhpZxpxVrJVDFOzK56ZZb1WbSzRo2O6iQt21Gk/klz/CJaFVUsWOvSpQvXSklUV+L8oiyS8Z5hfPn2/fvgb6DjjgI9epBMMJEiQi0mIYVkESejQ/0Ug/BIcJFFGC0MIZrM+oMIhCRtafo7VNOQTjaQ2tSM8QYLSZMkkw5tg0xhzzIjEquKJiNU2oYAs7HJiwwgQEnICYLTWIQNMO42immRDh2BDDCy+MwEEIFZgWH2xGXclabFbCVlt7tHEXU0IC/bBROiR1ZIOSwuVUHkZIiLNDRyMx91xIzu0gknQGkTYaVxIKlcEFplXQgQs1icMmeectuhMSoBQSYKT+XZUfWF9xQAIJmJIwQqae+vmfVGdBytQhD556llQC3mcVqw5uUsoj+TglHwYxJMGhja4kkcIJKtQYzAkAzOgh/rC+0PKEiU/cuMsAE9wy2DTJppDCYb2oeA0ANWCQQQsZqDCBCrQQAEAQNmykmThEGHdEOAut00EHIJgWaGqqZalaUfZeyW+Kq+HJICHJcKIZmKIu0OIa1eIu4aIu5uIu8KIZgqIVuaItpmIZVeIbFSIbGOAMpgC7r0j0OpA+CoALVtTLUqDIEsEHPB32DSEfn4AKll4gQ+Hu8x3uLqH0fNwNndxaTaATpR2xCkAM7gAPtV3eaSHZ8F3apmI+rWHJfF3alqI8AGZACmXG5uAFhaJC9SIsIiZAJ2ZAOuYuxKIuxGJEPeYslUAPVkSbIB0IjghjhAA7v/pEOV1GNJPkEA/Ah2wEPiDFH/IYyNmACJDACUAiOxOd75fh7NikDevYDaHcWMUgEwTUEPZADkTWPOaiD8tcC+jeQoUiEwYeT5MiUMoCTTPmJJLCQV8mQVMiQWJmVRjW2y4w1vErolh/jtah3R1inC45YkMBOQdj4hEtrmxFjh0kfEes0gnYhCRSYSFIgcEwx3CMWNquSHbBlSWQJnxk6AMZRhTRErV0ChUo/wUGSmmmuWxbSSwdJEhL7lJptnxeLbDpdMcObwEPpKRkSzLIa84TMlIppADCqbx2mhFccwwmG2k5SXXSJI1UvOa1WQhK0rJTRN9CpWrHJXBwijOjUikVGU8ZyjNCc4TjSqVKIIRPFyUNhfJaG2oYSM1pYnPh3STlG3TZ0gcAp19vlGWCI1mu6BGu0YGknbDy6FbWthQTsqyHZlcRywMKkl6IhKjsoQkEjNqUFq6UY76zCZ0gjOSFYZEAMGh/qELC5ArGf0TYSwaY6hIBc/KUBGSabvpiFZJInGKMZ3h7KlQV1RKj1qGauqYh1Tn4Y7bMSakMJKMGrspTzgeYCQGDWsk53mAdoTUrIvEJUTTWkV3KZOJzxRmOwRw0oxZ05r9pGYSzSrHfAaVRGzMKy1rWFCMdSSgKmQeXqEzkuKFdB30LKU5RXVKdZLIMe6IwkIWgpmt1QMKC6kHVX8qDnigRkY2FWpl5NmieUIWsn/1K2WoVo7MJgQK/4iABCRgAQxcwAIX2K0/IHCQqV5Qo/RE6DDPGkmtFlO5V32MR7MaoxhlTIoOhSgw2fpIe0bNkpys60ETyja89jOh1kUo/l7N208BEPS9KRRJSUvKQmsu0Kf4nWc3jdopVPr3n3vNqj1rwYAHMAAgEoCAcIMrAd0GRCADAS1BuEbVqJJWioxhDGR+muHGxCMemJVHQv4hgQv8FgMa2IAGVrxiC7jYAg1u8GgeIFUGyMM09pyth/eqVYwiMmoXliIxsxvFXpIWyFRjKBZtQUUnDvgxMRrbG2E4Q69usspUziTGXAGlssSyhgZghU7BOdRwVhadOzURZVEVZQLv7gEIJrGCdRvj3dq5wXQWTUAaAFrNanZrFDauoKPKEHWAuLRWpW1DGKLh22HmIAdJiD22ptmqJhp3yZ3MWKHZmMfeUNMFQGKQ/m/35FG7tciPRPKpG7rW2vGSod9NMpGZ1lZbyA4WCmheRv7rTnR6z2IqyucsA3zhClfVwpk9NqEzu2zMRJWzzDb2ceUBj8W4ox2FbjRpC83hHU83x2MVcFBB7dRNh5qJ6OauqSfzVEUDM5jNFWYMxUtXWmqZjges3YDV/e5aX5jfEdT1OitmI+iRsEd4401PYdvhUl/m4VScdmkMfUFkW/rG0paHVC1NDkt32KwNuai5nTvbK7qWr5Cd7knhDdVLo3ZE5L0uZe7N3iuCubwAXS2L+ile8PETjvCWNxaVSElhdsh6QIKYF39UkR21SnolfPqtlM70EZbwImg+bX6L/qltYzZ64hpmzDk6bkyIBxnZwpv2uk19cqCCPDIOP7ayqb3j1PCYr6ztqs7ryfeuppS1e48nzIWdGsCraM2kQuk+6evV/sxNR1NgTeSdMPm6MQxHc0M6CSUmsYld/Vbw7LVQswrqHXv9NHZ/edlX3+EQr/31pKXuyk3DbQtXmNDclu5egy1G0Mv29/9kaj0Fa0pQ+fOwea2IYjH5eNlUPvKTf77lGwZ1W42wYneLnvUHzlMAk731Hs6waUnJVOGnfrbtHvXEx2Gat8sekeWGJOvhj7tw+Fm6di2n2wrfVI/Elv99p3O7FhytZFTURIAD5V4wwimYlyPQ53yUJ3mx/nIRn/d5qzERnscqEqGBTXd9GFgwpuRN48duqjV6f1d6iJaCdWdVZKdolvFx7beCKfIiPIZZKGdWZYRUCiOCMxJTwmd4AOgpx+drYjSE7oRPw8d3DqEWFGGBSZc9teEqtcJ9VAiCE6FUJRhsojcq0hRdOoZtq6d27GcOsKeCH/d2gYdTLRJTOdUbOUhO3NR9QAiA+JR4A4WAZcRaAxWAAbiAnEcrVQeI1gNCCaeBgViFk4WIp0Rm5peFOcV76ZSDjXhZPhWD6yaGZncZteVc8ed+siVYKddXQCh6woZJWKVcc+iIcNhaeteKP7dGSaSIeeNr6gQq/EWE+sc9Othf/rw4iUPlX4u4ilk4ZjM4IqCGXykIg0GmbSOoVSr3gs5EcrtXVsuFhFz1RhFHNQNmcrs3eHrITa0YVIF1SG8HSVdUVoKXinoXeHmXhjOiiv8Hj/tFfiVIVP2VSr74X454Iqk4eJIFj6glItLYie9gg4A3GU5VbiiHYxB1VnbliuAIgM0lf0GGiu4ojg+pXuWmkB7lTFgVjQfVXCjHjdC1XJx2iptmTB25dq0XXR3pkiPpVxd1XcQ0TNVVjeLYh1uFhG1kkjSJig+5dwkVYIClWgJZjPnUY4i2dS8XWeQYbs5YhgzxO5R2ceHWdjlpjMrobtk0SyVpdMQUZeA2cvbE/nN/RV2mBXjhGI+/d5Qm95Ik+HLjR4nIeHobhpAMF45mCXITeWOmllBaJpIjZ5eupWkDOZRwN3+RFZFblVo3JZDsRpSlV3IoWGwJ4FmbQWIUcGcAAVoL4ZirJZBd9SLVxn42lnvHlX7L6HoUiY71SGbyGJuyKZQMV1TFN4NPtjtS8ABSQFyj8WDA+Q8IMVVyt3p+aWq5Z5XHxWi05YhrU5ukBJp7p5Tx5lxRuXZpV1WAtnFuh4zjR11q+VT20ABwFhAlZgGbqVuhsZ7DJRCjAQW9GWGiNVrfR2pYGITsqHN5lZWLOZv++YtamFS+KA6aQZ79YGcu9lu95WIY8GIO0/pi7CkQ8Ekan4macld7FzoOtsds0SZoxVmRzpg2tdmPAMVwrwV+UpScHHdxYjiX3ahzjrmOhadxnbUZmalgvHVivYViKrYBPuqjLNZiGgChMjafxYk0sWNEsVZkABdBVrluWRSlAEJJUbpkEnVjVwNovPMANhqcXgqcXGoYpTBBHWIuClBoFoddwBM2TtpAHXKmTvpsDPAv86IhhXGneFqgGmI1fGoKbxo8ZQh7aldptMd+QaZuSMZLqGYacApo5UkBJhapD/qgJgZjAFGed/oAgQAAOw==');
		background-size: 100% 100%;
		height: 100%;
	}
</style>

支持网络路径图片

<template>
	<!-- test.vue -->
	<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>