HTML怎么做hero粒子背景_HTML hero区域粒子动画背景【步骤】-html教程-PHP中文网

hero区域粒子背景必须限制作用域、控制密度、绑定容器尺寸，否则滚动错位或卡顿；需设hero为relative定位，canvas绝对定位并用getboundingclientrect动态适配宽高，禁用tsparticles全屏模式，桌面端粒子≤150个、移动端≤60个且关闭连线，透明度≥0.7。

html怎么做hero粒子背景_html hero区域粒子动画背景【步骤】

直接说结论：hero区域粒子背景 ≠ 全屏粒子，必须限制作用域、控制密度、绑定容器尺寸，否则一滚动就错位或卡顿。

为什么不能直接复用全屏粒子代码

全屏粒子通常监听 window.innerWidth / window.innerHeight，而 hero 区域是固定高度的 DOM 容器（比如 <section class="hero"></section>），强行用窗口尺寸会导致：

粒子溢出 hero 区域，在其他区块上乱飘
响应式缩放时 canvas 宽高不随容器重绘，出现拉伸或留白
滚动时 canvas 未设 position: absolute 或 z-index，被内容遮盖或压住文字

如何绑定 canvas 到 hero 容器

关键不是“画粒子”，而是“让 canvas 精确贴合容器”。步骤如下：

给 hero 容器加 position: relative（作为 canvas 的定位上下文）
canvas 插入 hero 内部最顶层，设 position: absolute; top: 0; left: 0; width: 100%; height: 100%
JS 中不再读 window.innerWidth，改用 heroEl.getBoundingClientRect() 获取实时宽高
每次 resize 或 scroll（如果 hero 是 sticky 或视差）后，调用 canvas.width = rect.width 和 canvas.height = rect.height

示例片段：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

const hero = document.querySelector('.hero');
const canvas = hero.querySelector('canvas');
const ctx = canvas.getContext('2d');

function resizeCanvas() {
  const rect = hero.getBoundingClientRect();
  canvas.width = rect.width;
  canvas.height = rect.height;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);

tsparticles 配置要关掉 autoSize

如果你用 tsparticles（推荐），默认会接管整个 body 尺寸。必须显式禁用自动适配，并指定目标容器：

删掉 fullScreen: { enable: true }（它默认就是 true）
加上 detectRetina: false（避免高清屏下 canvas 被双倍放大导致模糊）
interactivity.detect_on 改成 "canvas"，而不是 "window"
初始化时传入容器元素：tsParticles.load("hero-particles", options)，并在 HTML 中确保 <div id="hero-particles"></div> 在 hero 内部