当前位置：首页 > 行业动态 > 正文

html网站背景

admin
行业动态
2025-04-27
3217

HTML网站背景通过CSS设置，可定义颜色、图片，使用 background-color或 background-image属性，支持平铺、定位等效果

纯色背景设置

属性	说明	示例效果
`background-color`	定义背景颜色，可使用颜色名称、十六进制值、RGB/RGBA等	`<body style="background-color: #f0f0f0;">` 显示淡灰色背景

代码示例：

<body style="background-color: #ffffff;">
  <!-页面内容 -->
</body>

图片背景设置

属性	说明	示例效果
`background-image`	定义背景图片路径（URL）	`<body style="background-image: url('bg.jpg');">` 平铺显示图片
`background-repeat`	控制图片是否重复（`no-repeat`/`repeat`/`round`）	`no-repeat` 仅显示一次，`round` 自动缩放适应
`background-size`	调整图片尺寸（`cover`/`contain`/具体像素值）	`cover` 拉伸铺满，`contain` 保持比例缩放

完整代码示例：

html网站背景第1张

<body style="
  background-image: url('clouds.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
">
  <!-页面内容 -->
</body>

线性渐变背景设置

属性	说明	示例效果
`background`	复合属性，支持渐变语法	`<div style="background: linear-gradient(to right, red, blue);">` 水平渐变
方向参数	`to top/right/bottom/left` 或角度值（如 `120deg`）	垂直渐变：`linear-gradient(to bottom, #333, #fff)`

代码示例：

<div style="
  width: 100%; height: 500px;
  background: linear-gradient(135deg, #ff9a9e, #fad0c4);
">
  <!-渐变区域内容 -->
</div>

背景高级控制

属性	说明	作用
`background-attachment`	滚动行为（`fixed`/`scroll`）	`fixed` 固定背景，`scroll` 随页面滚动
`background-position`	定位位置（`top`/`center`/`bottom` + `left`/`right`）	`center center` 居中显示
多背景叠加	通过逗号分隔多个 `background` 值	实现多层次背景效果

示例代码：

<body style="
  background-image: url('pattern.png'), linear-gradient(to bottom, #ccc, #eee);
  background-repeat: repeat, no-repeat;
">
  <!-上层内容覆盖背景 -->
</body>