最轻量的是background-image加固定水印，但不可交互；真投品牌广告需用position:fixed容器层，支持链接、埋点与交互；iframe适用于独立加载场景，需注意跨域与尺寸控制。
直接用 background-image 加固定水印式广告最轻量，但要注意它不能点、不响应、不追踪曝光——真要投品牌广告，得用可交互的容器层，不是背景图。
用 body 背景图实现静态品牌露出
适合纯视觉强化品牌（比如活动页、落地页首屏），不依赖点击或数据回传。核心是让图片平铺/居中+半透明+不随滚动移动：
-
background-attachment: fixed是关键，否则滚动时水印会“滑走” - 水印图建议导出为 PNG 且带 10%–20% 不透明度，避免干扰正文阅读
- 如果用
background-repeat: repeat，注意图片尺寸要小（如 200×200px），不然重复间隙明显 - 路径必须写对：
url('./images/brand-watermark.png')，相对路径以 HTML 文件为基准
用 position: fixed 容器挂品牌横幅（推荐）
这才是真正能当广告用的方式：可设尺寸、加链接、嵌 iframe、支持 JS 交互和曝光埋点。常见错误是 z-index 太低被遮住，或没设 pointer-events: auto 导致点击穿透：
- 横幅容器必须设
z-index: 1000以上，尤其页面用了第三方 UI 库时容易冲突 - 若横幅在顶部，用
top: 0; left: 0; width: 100%; height: 80px；若右下角悬浮，用bottom: 20px; right: 20px; - 内部放
<a href="https://brand.com"><img src="banner.jpg" alt="品牌活动"></a>，别忘了alt和loading="lazy" - 禁止用
background塞图片进去——那样无法加链接，也难做 A/B 测试
嵌 iframe 做动态品牌广告位
适用于需要独立加载、防样式污染、或对接广告平台的场景。但 iframe 有固有限制，别硬套：
立即学习“前端免费学习笔记（深入）”；
-
src必须是同源或明确允许跨域的地址，否则控制台报Blocked a frame with origin ... - 别设
height: 100%——iframe 高度需显式指定，否则可能塌陷成 150px 默认值 - 加
sandbox="allow-scripts allow-same-origin"才能让内嵌 JS 正常运行（如曝光统计） - 移动端要加
width="100%"和style="max-width: 728px"，否则横幅撑破视口
真正难的不是贴一张图，而是让品牌信息在不打断用户动线的前提下被记住。背景图只负责“存在感”，固定容器负责“可触达”，iframe 负责“可运营”——选哪种，取决于你手里的资源和要达成的目标。
