html背景图

作者：〖掉望发布日期:2025-04-15 浏览:108

<!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>
        /* 使用CSS设置body的背景图片 */
        body {
            background-image: url('https://example.com/path/to/your/image.jpg'); /* 设置背景图片的URL */
            background-size: cover; /* 使背景图片覆盖整个页面 */
            background-repeat: no-repeat; /* 防止背景图片重复 */
            background-position: center; /* 将背景图片居中显示 */
            height: 100vh; /* 设置body的高度为视口高度 */
            margin: 0; /* 移除默认的外边距 */
        }
    </style>
</head>
<body>
    <h1>这是一个带有背景图的网页</h1>
</body>
</html>

解释说明：

background-image: url('...');：指定背景图片的路径。你可以将 https://example.com/path/to/your/image.jpg 替换为你自己的图片链接。
background-size: cover;：确保背景图片覆盖整个页面，即使图片的宽高比与页面不同，图片也会被缩放以适应页面大小。
background-repeat: no-repeat;：防止背景图片在水平或垂直方向上重复。
background-position: center;：将背景图片居中显示。
height: 100vh;：设置 body 的高度为视口高度（即浏览器窗口的高度），确保背景图片能够完整显示。
margin: 0;：移除默认的外边距，避免页面内容与浏览器边缘之间出现不必要的空白。

上一篇：html 播放视频

下一篇：html