html背景图片怎么设置大小

作者：﹏尐甶园发布日期:2026-01-01 浏览:19

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 设置背景图片大小 */
        body {
            background-image: url('your-image.jpg'); /* 替换为你的图片路径 */
            background-size: cover; /* 背景图片覆盖整个元素，可能会裁剪 */
            /* 或者使用以下选项 */
            /* background-size: contain;  背景图片在元素内完整显示，可能会留白 */
            /* background-size: 100% 100%;  背景图片拉伸至元素大小 */
            background-repeat: no-repeat; /* 防止背景图片重复 */
            background-position: center; /* 图片居中显示 */
        }
    </style>
</head>
<body>
    <h1>HTML 背景图片大小设置示例</h1>
</body>
</html>

解释说明：

background-image: 设置背景图片的路径。
background-size: 控制背景图片的大小。常用的值有：
- cover: 图片会缩放以覆盖整个元素，可能会裁剪部分内容。
- contain: 图片会缩放以完全适应元素，可能会留白。
- 100% 100%: 图片会被拉伸以完全填充元素，可能会变形。
background-repeat: 防止背景图片重复显示。
background-position: 控制背景图片的位置，center表示居中显示。

上一篇：htmlpadding属性

下一篇：html搜索框