html中背景图片怎么设置

作者：醉眼看苍生发布日期:2026-04-24 浏览:129

<!DOCTYPE html>
<html>
<head>
    <title>背景图片设置示例</title>
    <style>
        /* 使用 CSS 设置背景图片 */
        body {
            /* background-image 属性用于设置背景图片 */
            background-image: url('https://example.com/image.jpg');
            /* background-size 属性控制背景图片的大小，cover 表示图片会按比例缩放以覆盖整个元素 */
            background-size: cover;
            /* background-position 属性控制背景图片的位置，center 表示居中显示 */
            background-position: center;
            /* background-repeat 属性控制背景图片是否重复，no-repeat 表示不重复 */
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <h1>这是一个带有背景图片的页面</h1>
</body>
</html>

解释说明：

background-image: url('https://example.com/image.jpg');：设置背景图片的路径。
background-size: cover;：确保背景图片按比例缩放以覆盖整个元素。
background-position: center;：将背景图片居中显示。
background-repeat: no-repeat;：防止背景图片重复显示。

上一篇：html 横线

下一篇：html三张图片的轮播代码