HERO SECTION
全出血英雄区Full-bleed Hero
背景铺满整个视口宽度、不留边距，内容叠在深色图上。视觉冲击力最强的一类首屏。
效果预览
限时 · 早鸟价
成为超级个体
把重复劳动交给 AI，把时间还给创造。
适合用在哪
品牌官网、活动落地页、产品发布页；需要情绪感染力的场景。
容易踩的坑
- 背景图亮部恰好落在标题后面，白字对比度低于 4.5:1，必须加遮罩或换构图。
- 背景大图未压缩超过 500KB，移动网络下首屏白屏数秒，LCP 严重超标。
- 移动端用 100vh 时被浏览器地址栏遮挡，改用 100svh 或 100dvh。
设计提示词 · Prompt
全出血英雄区（Full-bleed Hero）：背景图或深色渐变铺满整个视口宽度与 80-100vh 高度，不留任何外边距。内容层叠在上方——居中排列的 Eyebrow、48-72px 白色大标题、白色 78% 透明度的副文案、并在的主按钮（白底深字）+ 次按钮（半透明白底 + 1px 白描边 + 背景模糊）。为保证金句可读，在背景上叠一层从右上到左下的白色柔光（radial-gradient，透明度 20% 左右）。整体色板控制在 2 个色相以内。
Full-bleed Hero: a background image or dark gradient fills the full viewport width and 80-100vh height, with no outer margin at all. The content layer sits on top — a centered eyebrow, a 48-72px white headline, supporting copy in white at 78% opacity, and side-by-side primary button (white background, dark text) + secondary button (semi-transparent white background + 1px white stroke + background blur). To keep the key line legible, overlay a soft white glow from top-right to bottom-left on the background (radial-gradient, around 20% opacity). Keep the overall palette within 2 hues.
常见搭配
同一页面里经常和「全出血英雄区」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s s--abs d-hero-bleed">
<span class="d-eyebrow">限时 · 早鸟价</span>
<h3 class="d-h1">成为超级个体</h3>
<p class="d-sub">把重复劳动交给 AI，把时间还给创造。</p>
<div class="d-row">
<button class="d-btn d-btn--p">立即加入</button>
<button class="d-btn d-btn--g d-btn--sm">了解更多</button>
</div>
</div>