html背景图片怎么添加

作者：浮云过影发布日期:2026-01-08 浏览:26

<!DOCTYPE html>
<html>
<head>
    <title>背景图片示例</title>
    <style>
        /* 使用CSS设置背景图片 */
        body {
            /* background-image 属性用于设置背景图片 */
            background-image: url('https://example.com/image.jpg');
            /* background-size 属性确保图片覆盖整个页面 */
            background-size: cover;
            /* background-repeat 属性防止图片重复 */
            background-repeat: no-repeat;
            /* background-attachment 属性使背景图片固定 */
            background-attachment: fixed;
        }
    </style>
</head>
<body>
    <h1>这是一个带有背景图片的网页</h1>
</body>
</html>

解释说明：

background-image: url('https://example.com/image.jpg');：这行代码指定了背景图片的路径。你可以将 https://example.com/image.jpg 替换为你自己的图片链接。
background-size: cover;：这行代码确保背景图片会覆盖整个页面，同时保持图片的宽高比。
background-repeat: no-repeat;：这行代码防止背景图片在水平和垂直方向上重复。
background-attachment: fixed;：这行代码使背景图片固定，当你滚动页面时，背景图片不会移动。

希望这个示例能帮助你理解如何在HTML中添加背景图片！

上一篇：html搜索框代码

下一篇：html图片标签