uni-app中背景图片的设置_uniapp背景图片设置-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_49171551/article/details/128911666

博客主要介绍了HTML和CSS中设置背景图片的相关参数。包括图片路径、是否平铺（如no - repeat、repeat、repeat - x、repeat - y）、图片起点位置（水平和垂直方向）以及图片大小（cover、contain、百分比）等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html部分


					<view class="center_model_content">
						<view class="">
							<image class="center_model_content_img" src="https://oss-sp-data.oss-cn-hangzhou.aliyuncs.com/twker/payCommission.png" mode=""></image>
						</view>
						<view class="" style="margin-left: 26upx;">
							<p class="money_detail">￥306.30</p>
							<p class="commission">已支付佣金</p>
						</view>
					</view>

css部分

.center_model_content_one{
		background: url(twker/center_model_content_one.png) （2）（3）（4） （5）;
		background-size: 100% 100%;//背景图片能够显示全
	}

设置背景图片的很多参数：

(1)url:图片路径

(2)no-repeat/repeat:是否平铺（repeat:水平垂直都平铺，默认。no-repeat:不平铺）

(3)repeat-x:水平平铺

(4)repeat-y:垂直平铺

(5)图片的起点位置：

!!!此值一共有两个，第一个：是水平位置，如果是具体的px值的话代表距离左边多少。第二个：垂直位置，如果给具体的px值代表距离上边多少。如果给百分比表示图片的百分比要重叠在盒子百分比那个位置上

水平方向：left(默认相当于0) center right

垂直方向：top(默认相当于0) center bottom

（6）图片大小：默认是图片的大小

background-size: cover:有一部分没有显示被覆盖的意思，表示图片一定要覆盖盒子，缩放后图片只要一边缩放到盒子内就停止缩放

background-size:contain:没有变形，完全显示了，表示图片一定被盒子包着，缩放后图片两边都要缩到盒子里才会停止缩放，都是按比例缩放，不会变形

background-size:百分比百分比：表示背景图片的百分之多少

总结：（2）（3）（4）（5）都是跟在图片路劲后面