作为HTML新手，如何用HTML代码设置网站背景？

纯原生HTML+CSS就能实现，不需要依赖任何第三方工具，核心逻辑是把作为背景的HTML元素单独做成一层，通过CSS层级控制压到网站内容下方，同时禁止它响应交互，新手直接抄下面的示例就能跑通。

• 先做DOM结构拆分：把页面分成两层，一层是放背景内容的容器，一层是放网站正常内容的容器，不要把背景内容和正文混写在同一个标签里。
• 给背景容器加专属样式，重点控制定位、层级、透明度、交互属性这几个参数。
• 调整前景内容的层级，确保它显示在背景上方、可以正常交互。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的个人站</title>
    <style>
        /* 重置页面默认边距，避免出现多余滚动条 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /* 背景层样式：放你要当背景的HTML内容 */
        .code-bg {
            position: fixed; /* 改成absolute的话背景会随页面内容滚动 */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* 把背景层压到最底层，不会盖住前景内容 */
            z-index: -1;
            /* 调透明度，让背景内容不抢前景的视线 */
            opacity: 0.12;
            /* 禁止选中背景内容，避免用户选正文的时候误选背景 */
            pointer-events: none;
            /* 代码类内容用等宽字体更贴合预期 */
            font-family: monospace;
            /* 按需调整背景底色 */
            background-color: #f5f5f5;
            padding: 2rem;
            line-height: 1.8;
        }
        /* 前景内容层：你网站本来要展示的正常内容 */
        .main-content {
            position: relative;
            /* 前景层在背景层上方 */
            z-index: 1;
            padding: 3rem 5rem;
            max-width: 800px;
            margin: 0 auto;
            /* 正文颜色用深灰，和淡背景形成对比 */
            color: #222;
            line-height: 1.8;
        }
    </style>
</head>
<body>
    <!-- 背景层：这里面放你要当背景的所有HTML代码/元素 -->
    <div class="code-bg">
        <p>&lt;!DOCTYPE html&gt;</p>
        <p>&lt;html&gt;</p>
        <p>&nbsp;&nbsp;&lt;head&gt;</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;我的个人网站&lt;/title&gt;</p>
        <p>&nbsp;&nbsp;&lt;/head&gt;</p>
        <p>&nbsp;&nbsp;&lt;body&gt;</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- 欢迎来到我的小站 --&gt;</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="card"&gt;&lt;/div&gt;</p>
        <p>&nbsp;&nbsp;&lt;/body&gt;</p>
        <p>&lt;/html&gt;</p>
    </div>

    <!-- 前景层：正常的网站内容 -->
    <div class="main-content">
        <h1>欢迎来到我的个人站</h1>
        <p>这里是我分享开发笔记、生活碎片的地方，后续会慢慢更新内容~</p>
        <a href="/about">关于我</a>
    </div>
</body>
</html>

• 背景滚动效果切换：把.code-bg的position: fixed改成position: absolute，背景就会跟着页面内容一起滚动；用fixed的话背景会固定在视口，滚动正文的时候背景不动。
• 透明度调整：修改opacity数值，一般代码文字背景用0.1-0.2的透明度最合适，不会抢正文的视线。
• 背景内容修改：直接往.code-bg的div里加内容就行——如果要显示代码文本，就用实体转义字符（比如<代替<）避免被浏览器当成真实HTML解析；如果要放真实的HTML元素（比如淡的装饰卡片、小图标），直接写正常标签就行，因为已经加了pointer-events: none，不会干扰前景的点击、选中操作。

• 不要漏写.code-bg的z-index: -1;，否则背景层会盖住前景的按钮、链接，导致用户点不动。
• 不要把opacity设得太高，超过0.3的话很容易让正文和背景叠在一起看不清。
• 如果出现多余的滚动条，检查是不是给背景层加了额外的padding/margin，示例里已经做了全局边距重置，直接用不会出问题。

内容的提问来源于stack exchange，提问作者Kiler_7