Website Screenshot ·
HTML 截图为什么和预览不同：CSS、图片与字体排错
HTML 导出与预期不同时，先按目标视口检查原图，再排查额外 CSS、资源可访问性和渲染时机。本教程用相同 Fieldnotes 文档复现一个 CSS 覆盖问题：添加规则时图形背景为粉色，清空规则后恢复绿色。两张 PNG 都来自工具实际导出。
打开工具跟着操作下载与查看完整源码
下面所有导出都使用这份原创 HTML。包含内嵌 CSS、系统字体和不透明背景容器，没有外部图片或字体请求。
下载 Fieldnotes HTML展开完整 HTML
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Fieldnotes — demo page</title>
<style>
*{box-sizing:border-box}body{margin:0;background:#f6f5ef;color:#17211c;font-family:Arial,Helvetica,sans-serif}main{max-width:1120px;margin:auto;padding:38px 54px 52px}nav{display:flex;align-items:center;justify-content:space-between;font-size:14px;border-bottom:1px solid #d9ddd3;padding-bottom:28px}.brand{font-size:24px;letter-spacing:-1px;font-weight:800}.dot{display:inline-block;width:18px;height:18px;border-radius:50%;background:#365c44;margin-right:9px}.navlinks{display:flex;gap:28px}.tag{font-size:11px;font-weight:700;letter-spacing:2px;color:#526357}.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;padding:65px 0 56px;align-items:center}h1{font-size:68px;line-height:1.01;letter-spacing:-4px;margin:20px 0 24px;font-weight:800}p{font-size:16px;line-height:1.65;color:#627065;max-width:350px}.cta{display:inline-block;background:#263e30;color:white;border-radius:8px;padding:16px 23px;font-size:14px;font-weight:700;margin-top:12px}.art{height:340px;background:#dce9d8;border-radius:150px 150px 20px 20px;position:relative;overflow:hidden}.circle{position:absolute;width:210px;height:210px;border-radius:50%;background:#c4d8b7;right:-35px;top:40px}.note{position:absolute;background:#fffef9;border:1px solid #e1e1d5;box-shadow:0 15px 25px #263e3012;border-radius:8px;padding:22px;left:35px;right:35px;top:65px;transform:rotate(-5deg)}.note h3{font-size:23px;margin:10px 0 20px;letter-spacing:-.5px}.line{height:7px;border-radius:3px;background:#e6e9df;margin:13px 0}.tick{background:#e7f1c4;color:#354b22;border-radius:5px;padding:10px;font-size:13px;margin-top:20px}.sticker{position:absolute;right:12px;bottom:26px;background:#e9ed99;border-radius:50%;width:96px;height:96px;display:flex;align-items:center;justify-content:center;text-align:center;transform:rotate(12deg);font-size:13px;font-weight:700}.strip{padding:22px 0;border-top:1px solid #d9ddd3;border-bottom:1px solid #d9ddd3;display:flex;justify-content:space-between;font-size:12px;color:#65705d}.section{padding-top:42px}h2{font-size:33px;letter-spacing:-1px;margin:0 0 24px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{padding:24px 20px;border:1px solid #d9ddd3;border-radius:12px;min-height:155px}.card .number{font-size:11px;letter-spacing:1px;color:#6c7a6d}.card h3{font-size:19px;letter-spacing:-.6px;margin:18px 0 10px}.card p{font-size:13px;line-height:1.5;margin:0}.footer{display:flex;justify-content:space-between;margin-top:45px;padding-top:20px;border-top:1px solid #d9ddd3;color:#71806f;font-size:11px}
@media(max-width:600px){main{padding:25px 24px 32px}.brand{font-size:21px}.navlinks{gap:15px;font-size:11px}.hero{grid-template-columns:1fr;padding:36px 0 28px;gap:28px}h1{font-size:55px;letter-spacing:-3px;margin:18px 0}.art{height:300px}.note{top:45px}.strip{font-size:10px;gap:12px}.cards{grid-template-columns:1fr}.card{min-height:130px;padding:22px}.section{padding-top:30px}h2{font-size:29px}.footer{font-size:9px;gap:10px}}
</style></head><body><div class="example-canvas" style="background:#f6f5ef;min-height:1080px"><main><nav><div class="brand"><span class="dot"></span>fieldnotes</div><div class="navlinks"><span>The notebook</span><span>Our story</span></div></nav><section class="hero"><div><span class="tag">A LITTLE SPACE TO THINK</span><h1>Good ideas<br>start here.</h1><p>A quieter home for notes, plans, and the things you don’t want to forget.</p><span class="cta">Open your notebook ↗</span></div><div class="art"><div class="circle"></div><div class="note"><span class="tag">MONDAY, IN FOCUS</span><h3>Make room for<br>what matters.</h3><div class="line"></div><div class="line" style="width:75%"></div><div class="tick">✓ One good idea at a time</div></div><div class="sticker">LESS NOISE.<br>MORE SPACE.</div></div></section><div class="strip"><span>Write freely</span><span>Find your rhythm</span><span>Keep the good stuff</span></div><section class="section"><h2>A small ritual. A clearer day.</h2><div class="cards"><div class="card"><span class="number">01 / COLLECT</span><h3>Catch the thought.</h3><p>Give your ideas somewhere to land before they disappear.</p></div><div class="card"><span class="number">02 / CONNECT</span><h3>See the bigger picture.</h3><p>Bring the pieces together, at your own pace.</p></div><div class="card"><span class="number">03 / CREATE</span><h3>Make something of it.</h3><p>Turn a blank page into your next good thing.</p></div></div></section><div class="footer"><span>Fieldnotes — fictional demo layout</span><span>Made for the Website Screenshot launch demo</span></div></main></div></body></html>
按步骤复现
- 下载统一的 Fieldnotes HTML，粘贴完整文档，选择 PNG、桌面（1920 × 1080）和原始输出尺寸。
- 将下方覆盖规则粘贴到独立 CSS 栏，转换并下载原图；图形背景应为粉色。
- 保持 HTML 不变，清空独立 CSS 栏后重新转换；图形背景应恢复绿色。
- 以 100% 对比两张原图。源码、格式、视口和等待设置相同，变化只来自额外 CSS。
- 示例正常后，再把你自己的图片、字体和脚本逐项加入，区分样式问题与资源加载问题。
实际导出与原始下载
以下文件于 2026 年 10 月 24 日通过公开工具实际生成，全部为 1920 × 1080。显示缩放为 100%，输出尺寸为原始尺寸，等待 1000 毫秒，打印样式关闭。预览会缩放，判断细节请下载原图。
下载服务原始文件
下载服务原始文件
情况一：额外 CSS 覆盖了内嵌样式
源码的 .art 使用 #dce9d8。下方规则使用相同选择器，但由独立 CSS 栏追加在文档之后，因此图形变为 #ffd4da。
移除规则后恢复内嵌样式。这符合正常的 CSS 层叠规则；并非所有“写在后面”的规则都一定获胜，选择器优先级、!important 等因素也会影响结果。
.art { background: #ffd4da; }情况二：PNG 的页面背景发生变化
当前 HTML 工具导出 PNG 时会请求透明页面背景，并对 html、body 应用透明背景规则。因此，只在根元素上设置的背景，可能与 JPG 的可见效果不同。
本教程用不透明的 example-canvas 内容容器保持米色背景。需要 PNG 保留指定颜色时，可以把背景设置在内容容器上；图片查看器显示白色，并不代表透明 PNG 内实际存有白色背景。
<div class="example-canvas"
style="background:#f6f5ef;min-height:1080px">
<!-- 你的页面内容 -->
</div>情况三：本地图片或样式表没有加载
src="./logo.png" 或 href="styles.css" 依赖文件和基础路径。粘贴 HTML 不会让远程渲染器自动取得这些本地文件。
请使用可公开访问的绝对地址，或将素材内联为 data URL。需要登录、VPN 或 localhost 才能访问的地址不是公开资源。上传器也不接受 ZIP 资源包。
<!-- 粘贴 HTML 不会一并上传本地素材。 -->
<img src="https://your-public-host.example/logo.png" alt="Logo">
<!-- 请换成你自己可公开访问的素材地址。 -->情况四：字体或换行位置不同
远程浏览器需要成功加载指定字体。请求失败、访问被拦截或字体返回较慢时，可能使用备用字体，导致字符宽度和换行变化。
先用系统字体复现，确认基础布局正常，再添加可访问的字体地址。可以测试更长的等待或合适的等待选择器，但某个元素出现不代表所有字体和图片都已加载。
情况五：预览与导出的尺寸不同
编辑器会缩放预览，以适应面板空间。预览的显示大小与下载文件的真实像素尺寸不是一回事。
排查时固定视口、输出尺寸、格式和打印样式设置，以 100% 查看原图并检查尺寸，再核对响应式断点。手机预设模拟的是浏览器设置，不是实体手机截图。
建议的定位顺序
从自包含 HTML 和空 CSS 栏开始，确认视口与格式，再逐项添加样式、图片、字体和动态内容；每次有意义的改动后都生成一次原图。
如果内容依赖私有站点、验证码、用户点击或无限滚动，需要识别这些限制，而不是反复增加等待。本教程提供定位方法，不保证所有 HTML 都能与本地环境完全相同。
常见问题
等待选择器能保证页面完全加载吗？
不能。它等待指定元素，其他网络资源、字体或后续脚本仍可能改变页面。
截图能准确模拟 Gmail 或 Outlook 吗？
不能。这里是浏览器渲染，不是各邮件客户端的兼容性测试。需要邮件兼容性结论时应使用对应的测试流程。
CSS 排错示例是否经过后期改图？
没有。两张 PNG 都是服务原始下载，记录文件保留了输入源码、额外 CSS、设置、字节数和文件哈希。
参考与测试范围
教程基于上述真实导出。结果适用于这份输入和记录的设置，不代表所有页面的性能、尺寸或兼容性保证。