html背景图片怎么铺满整个网页

作者：邪天血战发布日期:2026-05-26 浏览:48

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML背景图片铺满整个网页</title>
    <style>
        /* 设置 body 和 html 的高度为 100%，确保背景图片可以铺满整个页面 */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        /* 设置背景图片的样式 */
        body {
            background-image: url('your-image-url.jpg'); /* 替换为你自己的图片链接 */
            background-size: cover; /* 使背景图片铺满整个页面，并保持图片比例 */
            background-position: center; /* 将背景图片居中显示 */
            background-repeat: no-repeat; /* 防止背景图片重复 */
            background-attachment: fixed; /* 固定背景图片，使其不随页面滚动 */
        }
    </style>
</head>
<body>
    <h1>这是一个示例页面</h1>
    <p>背景图片已经铺满整个网页。</p>
</body>
</html>

解释说明：

html, body { height: 100%; }：确保 html 和 body 元素的高度为 100%，这样才能让背景图片铺满整个页面。
background-image: url('your-image-url.jpg');：设置背景图片的路径。你需要将 'your-image-url.jpg' 替换为你实际的图片链接。
background-size: cover;：使背景图片铺满整个页面，并保持图片的比例。如果图片的尺寸与页面不一致，图片会被裁剪以适应页面大小。
background-position: center;：将背景图片居中显示。
background-repeat: no-repeat;：防止背景图片在页面中重复显示。
background-attachment: fixed;：固定背景图片，使其不随页面滚动。

通过这些设置，你可以确保背景图片铺满整个网页，并且在不同设备上都能良好显示。

上一篇：html margin

下一篇：html5 websocket