【CSS】背景图定位问题适配不同机型

需求

如图, 实现一个带有飘带的渐变背景

其中头像必须显示飘带凹下去那里 , 需要适配不同的机型, 一不下心容易错位

实现

因为飘带背景是版本迭代中更新的, 所以飘带和渐变背景实则两个div

飘带切图如下 , 圆形部分需要契合头像

html 复制代码
	<view class="box-bg"></view>
	<view class="box-bg-img"></view>
css 复制代码
	.box-bg {
		position: absolute;
		width: 100%;
		height: 900rpx;
		background: linear-gradient(to bottom, blue, #ffffff);
	}

	.box-bg-img {
		position: absolute;
		width: 100%;
		height: 900rpx;
		background: url('bg.png') no-repeat;
		background-position: -10rpx -10rpx;   // 注意不要使用% vw等相对单位, 在不同机型动态单位会错乱, 需要根据头像的实际单位去控制position和size
		background-size: 380rpx 520rpx;
	}
相关推荐
幸福摩天轮7 分钟前
npm发布包
前端
前端AK君10 分钟前
Gitlab 线上合并冲突的坑
前端
ze_juejin10 分钟前
ES6 Module 深入学习
前端
章丸丸13 分钟前
Tube - Studio Videos
前端·后端
因吹斯汀1 小时前
一饭封神:当AI厨神遇上你的冰箱,八大菜系大师在线battle!
前端·vue.js·ai编程
心一信息1 小时前
ThreeJS骨骼示例
css·css3·html5
再学一点就睡1 小时前
NATAPP 内网穿透指南:让本地项目轻松 “走出去”
前端
拜无忧1 小时前
2025最新React项目架构指南:从零到一,为前端小白打造
前端·react.js·typescript
稻草人不怕疼1 小时前
记一次从“按钮点不动”到“窗口派发缺失”的排查过程
前端
irving同学462381 小时前
TypeORM 列装饰器完整总结
前端·后端·nestjs