【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;
	}
相关推荐
醉方休4 小时前
React 官方推荐使用 Vite
前端·react.js·前端框架
Dontla4 小时前
React惰性初始化函数(Lazy Initializer)(首次渲染时执行一次,只执行一次,应对昂贵初始化逻辑)(传入一个函数、传入函数)
前端·javascript·react.js
lypzcgf4 小时前
FastbuildAI新建套餐-前端代码分析
前端·智能体平台·ai应用平台·agent平台·fastbuildai
南囝coding5 小时前
Claude Code 插件系统来了
前端·后端·程序员
摇滚侠5 小时前
Spring Boot 3零基础教程,WEB 开发 默认的自动配置,笔记25
前端·spring boot·笔记
Cherry Zack5 小时前
Vue Router 路由管理完全指南:从入门到精通前言
前端·javascript·vue.js
亮子AI6 小时前
【npm】npm install 产生软件包冲突怎么办?(详细步骤)
前端·npm·node.js
汪汪大队u6 小时前
为什么 filter-policy 仅对 ASBR 的出方向生效,且即使在该生效场景下,被过滤的路由在协议内部(如协议数据库)依然存在,没有被彻底移除?
服务器·前端·网络
慧一居士6 小时前
vue.config.js 文件功能介绍,使用说明,对应完整示例演示
前端·vue.js
颜酱6 小时前
用导游的例子来理解 Visitor 模式,实现AST 转换
前端·javascript·算法