技术栈本文以 Vue 3 SCSS 为主同时给出一份零依赖的纯 HTML 版便于直接预览。文中rpx为小程序类框架常用的等比单位750 基准纯 HTML 版已按 1rpx ≈ 0.5px 换算为px并用移动端外框包裹以保证比例。目录效果一、介绍1、为什么 Hero 背景值得单独写2、核心思路三层叠出高级感二、准备工作1、项目环境2、配色方案紫罗兰渐变三、使用步骤关键点1、底色linear-gradient 从上到下2、装饰光束伪元素 独立 .hero__beam3、层级控制绝对定位 z-index4、配色驱动CSS 变量一键换肤5、信息层细节头像白边 文字对比四、完整示例1、纯 HTML 版保存即看推荐先跑这个2、Vue SCSS 版移动端项目接入运行方式五、可能出现的小问题踩坑记录1、Hero 用 absolute 但父容器没 relative定位跑到视口外2、rpx 仅小程序类框架支持纯 HTML 里要改 px / %3、伪元素 / 光束元素忘记写 content 或尺寸导致不显示4、overflow: hidden 既裁切光束也裁切内容5、光束 top 值不够大顶部颜色被白色半透明冲淡6、头像白边 图片裁切别忘了 overflow: hidden六、总结欢迎关注【前端小知识营地】效果下面是纯 HTML 版第四·1 节运行后的视觉效果描述。实际是一块顶部区域紫罗兰渐变从顶边一行整体开始向下自然过渡四道半透明白色光束交错倾斜增加层次用户信息头像 用户名浮在装饰之上整块 Hero 之外的页面为留白便于你自行接入后续内容。底色紫罗兰#a89cf6→ 浅紫#d4cfff→ 页面灰#f5f7fa从上到下自然过渡顶边颜色贴实、底部与页面底色无缝衔接。光束四道半透明白条伪元素两道.22/ 独立元素两道.16以 29°–30° 交错倾斜被overflow:hidden裁切在 Hero 内光束 top 值留得足够大负得少从 Hero 上半部贯穿到中下部在紫罗兰底色上形成可见的斜向光带增加层次。用户信息头像用通用未登录占位浅灰圆 白色人像剪影用户名主文案深色z-index高于装饰层。一、介绍1、为什么 Hero 背景值得单独写会员中心、个人主页、钱包页顶部那块有质感的彩色背景几乎每个 C 端项目都要做一遍。最常见的翻车是要么塞一张大图——体积大、加载慢、换肤难要么用纯色块又太单调。纯 CSS 渐变 伪元素零图片就能做出有光感、有层次的 Hero而且换色只需改一处变量。这类需求高频且套路固定值得沉淀一套可复用的写法。2、核心思路三层叠出高级感把 Hero 拆成三层各管一摊互不打架层实现职责底色层background: linear-gradient(...)整体色调与上下过渡装饰层::before/::after与.hero__beam旋转光束斜向光带提升精致度内容层用户信息子元素 z-index永远浮于最上关键点底色只用一层linear-gradient装饰光束用伪元素 / 独立元素承托内容层靠position: relative; z-index压在所有装饰之上。本文聚焦 Hero 本身与用户信息层页面其余部分由你按需接入不在本文展开。二、准备工作1、项目环境环境要求Taro 4 Vue3 项目npm i tarojs/taro vue用到 SCSS 需再装sass。本文样式以 Vue 3 SCSS 编写用到嵌套、--xxx修饰类、CSS 变量示例里色值直接写死便于复制即用接进工程后可改回import设计令牌变量。下方依赖按 Taro 4 脚手架给出装好sass后开箱即用无需额外配置纯 HTML 版任意浏览器直接打开无需构建。{ tarojs/taro: ^4.2.0, tarojs/plugin-framework-vue3: 4.2.0, vue: ^3.0.0, sass: ^1.0.0 }2、配色方案紫罗兰渐变采用紫罗兰系顶部色值偏深、向下自然过渡既有辨识度又不会压过内容适合个人中心未登录态或用户信息不太复杂时的背景。所有色值集中到 CSS 变量换肤只动变量。变量取值说明渐变起#a89cf6顶部紫罗兰渐变中#d4cfff过渡浅紫渐变末#f5f7fa页面灰主题色#8b7cf6标签 / 按钮 / 强调文字主文案#1f2937昵称 / 用户名注想换成蓝色 / 橙色只改这几个色值即可结构与类名一行不用动。三、使用步骤关键点1、底色linear-gradient 从上到下Hero 的底色只用一层线性渐变方向 180° 从上到下顶部一行整体是深紫罗兰向下自然过渡到页面灰避免斜向渐变导致的顶部左右深浅不一同时底部终点色与页面底色一致Hero 与下方内容自然衔接没有明显边界。.hero { position: absolute; top: 0; left: 0; right: 0; height: 240rpx; overflow: hidden; // 关键裁切超出 Hero 的光束 background: linear-gradient(180deg, #a89cf6 0%, #d4cfff 55%, #f5f7fa 100%); }2、装饰光束伪元素 独立 .hero__beam这是精致感的来源——少了它渐变再好看也像少了层滤镜。项目里用了两套共四道.hero自身的::before / ::after做两道再叠加独立的.hero__beam元素两道角度一轻一重29° / 30°、不透明度略有差异.22/.16交错摆放后被overflow:hidden裁切露出斜向光束。纯 HTML 里用独立元素更直观但伪元素那份也建议保留否则光感会比项目少一半。// 伪元素两道 .hero { ::before, ::after { content: ; position: absolute; top: -120rpx; width: 160rpx; height: 520rpx; background: rgba(255, 255, 255, .22); transform: rotate(29deg); } ::before { left: 246rpx; } ::after { right: -20rpx; } } // 独立元素两道 .hero__beam { position: absolute; width: 180rpx; height: 520rpx; top: -160rpx; transform: rotate(30deg); background: rgba(255, 255, 255, .16); } .hero__beam--left { left: -16rpx; } .hero__beam--right { right: 106rpx; }3、层级控制绝对定位 z-indexHero 用position: absolute脱离文档流铺在顶部父容器必须position: relative否则 Hero 会相对视口定位直接跑到页面外。用户信息写在 Hero 内部用position: relative; z-index: 3压在装饰光束z-index默认 0 / auto之上保证文字永远清晰。.hero { position: absolute; // 父容器需 position: relative // ... .hero__user { position: relative; z-index: 3; // 高于装饰光束层 display: flex; align-items: center; } }4、配色驱动CSS 变量一键换肤把配色收敛到:root或.hero上的 CSS 变量换肤只需改一处:root { --hero-c1: #a89cf6; --hero-c2: #d4cfff; --hero-c3: #f5f7fa; --theme: #8b7cf6; } .hero { background: linear-gradient(180deg, var(--hero-c1) 0%, var(--hero-c2) 45%, var(--hero-c3) 100%); }蓝色系把变量改成#bfdbfe / #dbeafe / #f5f7fa、主题#3b82f6即可橙色系同理。一处改动全站同步。5、信息层细节头像白边 文字对比头像用border: 6rpx solid #fff在彩色渐变上抠出一圈白边未登录态可用浅灰圆 白色人像剪影占位避免彩色渐变头像抢夺背景注意力用户名用深色#1f2937这是 Hero 上最容易被忽略的细节。.hero__avatar { width: 128rpx; height: 128rpx; border-radius: 50%; overflow: hidden; border: 6rpx solid #fff; // 白边 box-sizing: border-box; flex-shrink: 0; background: #e5e7eb; // 未登录态占位底 display: flex; align-items: center; justify-content: center; } .hero__name { max-width: 150rpx; color: #1f2937; // 深于背景保证可读 font-size: 36rpx; font-weight: 500; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }四、完整示例下面给出两份可直接复制运行的示例。第一份是纯 HTML 版零依赖、保存即看第二份是 Vue SCSS 版用于移动端项目接入。两者都只含 Hero 与用户信息页面其余部分由你自行接入。1、纯 HTML 版保存即看推荐先跑这个把下面整段保存为hero.html双击用浏览器打开即可看到完整效果紫罗兰渐变 Hero 旋转光束 用户信息层。示例用.phone外框按 390px 移动端视口呈现避免桌面预览时比例失调Hero 之外为留白方便你后续拼接自己的内容区。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title渐变 Hero 演示/title style :root { --theme: #8b7cf6; --hero-c1: #a89cf6; --hero-c2: #d4cfff; --hero-c3: #f5f7fa; --text-primary: #1f2937; --text-secondary: #6b7280; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, PingFang SC, Microsoft YaHei, sans-serif; background: #e9edf2; } /* 手机外框按 390px 移动端视口呈现避免 px 在桌面比例失调 */ .phone { max-width: 390px; margin: 0 auto; min-height: 100vh; background: var(--hero-c3); position: relative; /* Hero 的 relative 父容器 */ overflow: hidden; } /* 渐变 Hero */ .hero { position: absolute; top: 0; left: 0; right: 0; height: 120px; overflow: hidden; padding-top: 28px; background: linear-gradient(180deg, var(--hero-c1) 0%, var(--hero-c2) 45%, var(--hero-c3) 100%); } /* 装饰光束伪元素两道 独立元素两道柔和可见但不生硬 */ .hero::before, .hero::after { content: ; position: absolute; top: -40px; width: 80px; height: 260px; background: rgba(255, 255, 255, .22); transform: rotate(29deg); } .hero::before { left: 123px; } .hero::after { right: -10px; } .hero__beam { position: absolute; width: 90px; height: 260px; top: -50px; transform: rotate(30deg); background: rgba(255, 255, 255, .16); } .hero__beam--left { left: -8px; } .hero__beam--right { right: 53px; } .hero__user { position: relative; z-index: 3; padding-top: 12px; margin: 0 15px; display: flex; align-items: center; } .hero__avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; border: 3px solid #fff; box-sizing: border-box; flex-shrink: 0; background: #e5e7eb; /* 未登录态占位底 */ display: flex; align-items: center; justify-content: center; } /* 通用未登录人像占位白灰剪影 */ .hero__avatar svg { width: 52%; height: 52%; fill: #fff; } .hero__meta { flex: 1; min-width: 0; margin-left: 13px; } .hero__name { max-width: 120px; color: var(--text-primary); font-size: 18px; font-weight: 500; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /style /head body div classphone !-- 渐变 Hero -- div classhero span classhero__beam hero__beam--left/span span classhero__beam hero__beam--right/span div classhero__user div classhero__avatar svg viewBox0 0 24 24 aria-hiddentrue path dM12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z/ /svg /div div classhero__meta span classhero__name用户名/span /div /div /div /div /body /html2、Vue SCSS 版移动端项目接入在 Vue 3 组件里把样式放进style langscss模板按上面的结构组织即可。下方为关键 SCSS 片段移动端常用rpx等比单位若项目用px设计稿将rpx按比例换算即可。// 组件 style langscss 中的关键片段 :root { --theme: #8b7cf6; --hero-c1: #a89cf6; --hero-c2: #d4cfff; --hero-c3: #f5f7fa; } .page { min-height: 100vh; width: 100%; background: var(--hero-c3); position: relative; // Hero 的 relative 父容器 } .hero { position: absolute; top: 0; left: 0; right: 0; height: 240rpx; // 若项目用 px 设计稿按基准换算 overflow: hidden; background: linear-gradient(180deg, var(--hero-c1) 0%, var(--hero-c2) 45%, var(--hero-c3) 100%); // 装饰光束伪元素两道top 让光束从 Hero 上半部贯穿下来 ::before, ::after { content: ; position: absolute; top: -80rpx; width: 160rpx; height: 520rpx; background: rgba(255, 255, 255, .22); transform: rotate(29deg); } ::before { left: 246rpx; } ::after { right: -20rpx; } // 装饰光束独立元素两道 __beam { position: absolute; width: 180rpx; height: 520rpx; top: -100rpx; transform: rotate(30deg); background: rgba(255, 255, 255, .16); } __beam--left { left: -16rpx; } __beam--right { right: 106rpx; } __user { position: relative; z-index: 3; padding-top: 28rpx; margin: 0 30rpx; display: flex; align-items: center; } } .hero__avatar { width: 128rpx; height: 128rpx; border-radius: 50%; overflow: hidden; border: 6rpx solid #fff; box-sizing: border-box; flex-shrink: 0; background: #e5e7eb; // 未登录态占位底 display: flex; align-items: center; justify-content: center; } .hero__name { max-width: 150rpx; color: #1f2937; font-size: 36rpx; font-weight: 500; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }注本方案采用文字直接浮在渐变上的扁平做法兼容性最好若你想要毛玻璃质感可给.hero__user外包一层backdrop-filter: blur()的卡片但需加-webkit-前缀并留意移动端 WebView 兼容。运行方式环境要求Taro 4 Vue3 项目npm i tarojs/taro vue用到 SCSS 需再装sass。纯 HTML 版零环境复制第四·1 节整段保存为hero.html浏览器双击打开即可看到全部效果无需任何依赖或构建。Vue SCSS 版将第四·2 节样式片段并入组件style langscss并按相同 DOM 结构组织模板单位rpx按你项目的基准换算即可纯 px 项目换成对应 px 值。换色改:rootHTML 版或组件作用域上的--hero-*与--theme变量即可整体换肤蓝 / 橙 / 绿随意。五、可能出现的小问题踩坑记录1、Hero 用 absolute 但父容器没 relative定位跑到视口外.hero { position: absolute }会相对于最近的已定位祖先定位若父容器.page没有position: relative它会一路找到body结果 Hero 可能脱离预期位置甚至不可见。务必给直接父容器加position: relative。2、rpx 仅小程序类框架支持纯 HTML 里要改 px / %部分移动端框架提供了rpx按屏幕宽度等比换算单位但纯 HTML 文件不支持 rpx必须写成px或%如第四·1 节已换算。把框架代码直接粘到.html里会全部失效反之亦然。建议纯 HTML 用移动端外框 固定 px呈现比例最接近真机。3、伪元素 / 光束元素忘记写 content 或尺寸导致不显示::before/::after必须带content: 哪怕是空字符串才会生成盒子独立的光束元素如.hero__beam则需要显式width/height否则background全部无效光束凭空消失。这是 CSS 最常见的低级坑写的时候容易顺手漏掉。4、overflow: hidden 既裁切光束也裁切内容overflow: hidden是为了把探出 Hero 的光束上端切掉。但它同样会裁切 Hero 内部任何超出高度的内容——如果用户信息卡片过高底部会被切。确认.hero__user总高度 padding-top不超过 Hero 高度若后续要接内容区把内容放到 Hero 之外的兄弟节点即可不要挤进 Hero 内部。5、光束 top 值不够大顶部颜色被白色半透明冲淡光束元素和伪元素都压在 Hero 区域内如果top负得太多白色半透明会集中在 Hero 中下部顶部虽然贴实但整体光感偏弱如果top只负一点点又容易遮住顶部。把top调到光束从 Hero 上半部贯穿到中下部例如伪元素-80rpx、独立光束-100rpx纯 HTML 版对应-40px / -50px既能保证顶部颜色贴实又能让斜向光带完整可见。6、头像白边 图片裁切别忘了 overflow: hidden头像border-radius: 50%只裁切边框圆角内部img/ 占位块若不设overflow: hidden方图会溢出圆形。白边用borderbox-sizing: border-box才不会被图片盖住。六、总结本文把会员中心页面的渐变 Hero 拆成「底色 光束 用户信息」三层聚焦在 Hero 本身与用户信息层配色清透紫罗兰系比正紫更偏蓝、更亮、饱和度更低用 CSS 变量收敛到一处蓝 / 橙 / 绿一键切换。质感线性渐变从上到下铺底光束上移后顶部颜色贴实、底部自然过渡为页面底色文字直接浮在渐变上的扁平做法兼容性最好靠白边头像、通用未登录占位与深浅文字对比拉质感不依赖backdrop-filter。聚焦本文只讲 Hero 与用户信息这一块页面其余内容由你按需接入结构与样式互不干扰。纯 HTML 版保存即看、零依赖Vue SCSS 版并入组件样式即可。踩坑记录里absolute需配合relative父容器伪元素必须content: 光束top不够大导致顶部发灰是最高频的三处提前规避能省不少调试时间。欢迎关注【前端小知识营地】
在Agent运行图中访问长期记忆)
