首页 前端知识 uni-app中背景图片的设置

uni-app中背景图片的设置

2024-05-05 22:05:29 前端知识 前端哥 441 82 我要收藏

html部分


					<view class="center_model_content">
						<view class="">
							<image class="center_model_content_img" src="https://www.qianduange.cn/upload/article/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)都是跟在图片路劲后面

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7020.html
标签
评论
发布的文章

HTML5-新增表单元素

2024-05-10 08:05:59

Dayjs 的一些常用方法

2024-05-10 08:05:59

Howler.js HTML5声音引擎

2024-05-10 08:05:59

前端攻城狮HTML5自查手册

2024-05-10 08:05:51

JavaScript 基础入门

2024-05-10 08:05:41

HTML5新手入门指南

2024-05-08 10:05:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!