html网页图片背景

基础用法

通过CSS的background-image属性设置图片背景，需指定图片路径。
语法：

element {
  background-image: url('图片路径');
}

示例：

<div class="bg"></div>

.bg {
  background-image: url('images/bg.jpg');
  width: 100%;
  height: 500px;
}

高级背景设置

结合其他背景属性控制显示效果，常用属性包括：
| 属性 | 作用 | 示例值 |
|———————|——————————|———————-|
| background-repeat | 控制图片平铺方式 | no-repeat |
| background-size | 调整图片尺寸 | cover / 100% |
| background-position | 定位图片位置 | center top |
| background-attachment | 滚动行为 | fixed / scroll |

综合示例：

body {
  background-image: url('images/bg.png');
  background-repeat: no-repeat;
  background-size: cover; / 等比缩放铺满 /
  background-position: center; / 居中对齐 /
  background-attachment: fixed; / 固定背景，内容滚动 /
}

兼容性处理

早期IE浏览器（如IE6-8）需使用filter或progid实现背景图：

/ 针对IE6-8 /
.bg {
  background: none; / 清除默认背景 /
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg.jpg', sizingMethod='scale');
}

响应式适配

使用媒体查询或background-size适配不同屏幕：

/ 自适应高度 /
.bg {
  background-size: 100% auto;
}
/ 移动端优化 /
@media (max-width: 768px) {
  .bg {
    background-position: top; / 小屏时顶部对齐 /
  }
}

常见问题与解答

问题1：如何让背景图片不随内容滚动？
解答：设置background-attachment: fixed;，背景将固定在视口，内容单独滚动。
示例：

div {
  background-attachment: fixed;
}

问题2：如何让背景图片铺满整个容器且保持比例？
解答：使用background-size: cover;，图片会按比例缩放，覆盖整个容器。
示例：

.container {
  background-size: cover;
  width: 300px;
  height: 200px;
}