CSS3 背景图片

基本属性

1. background-image
   • 作用：设置元素背景图片
   • 语法：background-image: url (“image.jpg”) | none
   • 支持多背景图：background-image: url (“img1.png”), url (“img2.png”)
2. background-repeat
   • 控制图片平铺方式
   • 取值：
     • repeat | repeat-x | repeat-y | no-repeat
     • space | round (CSS3 新增)
3. background-position
   • 设置图片起始位置
   • 语法：background-position: x y
   • 取值：
     • 关键字：top | right | bottom | left | center
     • 百分比 / 长度值：50% 50% | 10px 20px
4. background-size
   • 控制图片尺寸
   • 取值：
     • auto | cover | contain
     • 具体尺寸：100px 200px | 50% auto
5. background-attachment
   • 控制滚动行为
   • 取值：
     • scroll | fixed | local

使用场景

1. 全屏背景

body {
    background-image: url("bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

2. 纹理背景

.container {
    background-image: url("texture.png");
    background-repeat: repeat;
}

3. 内容装饰

.button {
    background-image: url("icon.png");
    background-position: 10px center;
    background-repeat: no-repeat;
    padding-left: 30px;
}

4. 响应式背景

.banner {
    background-image: url("banner-large.jpg");
    background-size: contain;
}
@media (max-width: 768px) {
    .banner {
        background-image: url("banner-small.jpg");
    }
}

5. 多背景组合

.hero {
    background-image:
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url("hero-image.jpg");
    background-size: cover;
}

特殊情况

1. 图片加载失败
   • 设置备用背景色

background: #eee url("image.jpg") no-repeat;

2. 性能优化

• 避免使用过大图片
• 考虑使用 CSS 渐变替代简单图片
• 使用 WebP 等现代图片格式

浏览器兼容性

• IE8 及以下不支持多背景
• 旧版浏览器可能需要前缀
• Android 4.3 及以下对 background-size 支持不完善

与背景色配合

• 背景色会显示在图片下层
• 图片加载失败时会显示背景色

打印问题

@media print {
    body {
        background-image: none !important;
    }
}

最佳实践

1. 图片优化
   • 使用适合尺寸的图片
   • 压缩图片体积
   • 考虑使用雪碧图减少 HTTP 请求
2. 响应式设计
   • 使用媒体查询切换不同尺寸图片
   • 结合 picture 元素使用
3. 可访问性
   • 确保背景图上的文字可读
   • 提供足够的颜色对比度
   • 重要内容不要仅依赖背景图传达

维护技巧

/* 使用CSS变量管理图片路径 */
:root {
    --main-bg: url("images/bg.jpg");
}
.header {
    background-image: var(--main-bg);
}

常见错误

1. 路径错误

background-image: url("image.png"); /* 相对路径问题 */

2. 尺寸不当

background-size: 100% 100%; /* 可能导致图片变形 */

3. 忽略重复

background-image: url("pattern.png"); /* 忘记设置repeat */

4. 性能问题

• 使用超大背景图导致加载缓慢

5. 覆盖问题

background: url("img.jpg"); /* 会重置其他背景属性 */