【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;
	}
相关推荐
做好一个小前端12 分钟前
后端接口获取到csv格式内容并导出,拒绝乱码
前端·javascript·html
第七种黄昏16 分钟前
前端面试-箭头函数
前端·面试·职场和发展
Youyzq17 分钟前
前端box-shadow出现兼容性问题如何处理
前端
携欢25 分钟前
PortSwigger靶场之将 XSS 存储到onclick带有尖括号和双引号 HTML 编码以及单引号和反斜杠转义的事件中通关秘籍
前端·html·xss
三小河33 分钟前
工作中的Ai工具汇总
前端
mapbar_front1 小时前
react项目开发—关于代码架构/规范探讨
前端·react.js
二木一夕1 小时前
Vue 3 的组合式 API和传统选项式 API区别(vue2转vue3,两者差异)
前端
LuckySusu1 小时前
【vue篇】Vue 项目中的静态资源管理:assets vs static 终极指南
前端·vue.js
LuckySusu1 小时前
【vue篇】Vue.delete vs delete:数组删除的“陷阱”与正确姿势
前端·vue.js
LuckySusu1 小时前
【vue篇】Vue 模板编译原理:从 Template 到 DOM 的翻译官
前端·vue.js