html background image

作者：我在坚强也需要有人疼发布日期:2026-02-08 浏览:28

<!DOCTYPE html>
<html>
<head>
    <title>HTML Background Image Example</title>
    <style>
        /* 设置 body 的背景图片 */
        body {
            background-image: url('https://example.com/image.jpg'); /* 替换为你的图片链接 */
            background-size: cover; /* 图片覆盖整个背景 */
            background-repeat: no-repeat; /* 防止图片重复 */
            background-position: center; /* 图片居中显示 */
        }
    </style>
</head>
<body>
    <h1>这是一个带有背景图片的页面</h1>
    <p>你可以在这里添加更多的内容。</p>
</body>
</html>

解释说明：

background-image: url('https://example.com/image.jpg');：设置背景图片的 URL，替换为你自己的图片链接。
background-size: cover;：确保图片覆盖整个背景区域，即使图片被拉伸或裁剪。
background-repeat: no-repeat;：防止背景图片在水平和垂直方向上重复。
background-position: center;：使背景图片居中显示。

上一篇：html滚动条隐藏却有滚动效果

下一篇：css代码放在html中哪个位置