【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;
	}
相关推荐
uhakadotcom17 小时前
入门教程:如何编写一个chrome浏览器插件(以jobleap.cn收藏夹为例)
前端·javascript·面试
捡芝麻丢西瓜17 小时前
SPM 之 混编(OC、Swift)项目保姆级教程(Swift Package Manager)
前端
我是天龙_绍17 小时前
cdn是个啥?
前端
南雨北斗17 小时前
VSCode三个TS扩展工具介绍
前端
若无_17 小时前
了解 .husky:前端项目中的 Git Hooks 工具
前端·git
ze_juejin17 小时前
前端发送语音方式总结
前端
给月亮点灯|17 小时前
Vue3基础知识-Hook实现逻辑复用、代码解耦
前端·javascript·vue.js
Simon_He18 小时前
一款适用于 Vue 的高性能流式 Markdown 渲染器,源自我们的 AI 聊天机器人
前端·vue.js·markdown
顽强d石头18 小时前
v-model与.aync的区别
前端·javascript·vue.js
Hilaku18 小时前
我为什么认为 CSS-in-JS 是一个失败的技术?
前端·css·前端框架