如何使用图片作为页面框架并在其中添加内容与子图片

当然可以实现！你当前的代码只是把图片设为body的背景，这种方式很难精准控制内容在框架里的位置。推荐用一个容器元素来承载框架图片和内部内容，具体方案如下：

核心思路 #

• 创建一个主容器（比如<div class="page-frame">），将框架图片设为容器的背景
• 给容器设置匹配图片的尺寸（或通过background-size适配），并开启相对定位，方便内部内容精准放置
• 在容器内部直接添加文本、图片等元素，通过绝对定位或内边距调整位置，嵌入到框架的对应区域

修改后的代码示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta charset="utf-8">
    <title>带图片框架的页面</title>
    <style type="text/css">
        /* 重置默认样式，避免额外边距影响 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background-color:#FFFFFF;
            /* 让body占满视口，方便容器居中 */
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        /* 页面框架容器 */
        .page-frame {
            /* 替换为你的框架图片尺寸 */
            width: 800px;
            height: 600px;
            background-image:url('pngegg (3).png');
            background-position:center center;
            background-repeat:no-repeat;
            /* 让图片适配容器尺寸，可选cover/contain */
            background-size: contain;
            /* 开启相对定位，作为内部元素绝对定位的参考 */
            position: relative;
            /* 可选：添加边框方便调试 */
            /* border: 1px solid #ccc; */
        }
        /* 内部文本示例 */
        .frame-text {
            /* 绝对定位，精准控制位置 */
            position: absolute;
            top: 100px;
            left: 150px;
            color: #333;
            font-size: 18px;
            width: 500px;
            line-height: 1.6;
        }
        /* 内部嵌入图片示例 */
        .frame-img {
            position: absolute;
            bottom: 80px;
            right: 120px;
            width: 150px;
            height: 150px;
            border-radius: 8px;
        }
        a  { color:#0000FF; }
        a:visited { color:#800080; }
        a:hover { color:#008000; }
        a:active { color:#FF0000; }
    </style>
</head>
<body>
    <div class="page-frame">
        <!-- 内部文本内容 -->
        <div class="frame-text">
            这是嵌入在图片框架里的文本内容，你可以自由编辑样式和位置。
        </div>
        <!-- 内部嵌入的小图片 -->
        <img src="your-small-image.png" alt="内部小图" class="frame-img">
    </div>
</body>
</html>

关键说明 #

• 容器的width和height建议设置为和你的框架图片一致，或者用background-size: cover让图片铺满容器，contain则保持图片完整比例
• 内部元素用position: absolute时，top/left/bottom/right的值需要根据你的框架图片实际可编辑区域调整
• 如果框架图片有透明区域，内部内容会自然显示在透明部分，完全符合“图片作为框架”的需求

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