学习

CSS 背景属性

2026-02-23/0/ 编辑

CSS 背景属性

概念

背景属性用于设置元素的背景，包括背景颜色、背景图片、背景位置等。

基本语法

background: background-color background-image background-repeat background-position;

背景颜色 (background-color)

语法

background-color: 颜色值;

颜色值格式

格式	示例	说明
颜色名称	`red`, `blue`, `pink`	预定义颜色名称
十六进制	`#ff0000`, `#333`, `#fff`	最常用格式
RGB	`rgb(255, 0, 0)`	红绿蓝三色值
RGBA	`rgba(255, 0, 0, 0.5)`	带透明度的 RGB

透明度示例

/* 不透明 */
background-color: orange;

/* 半透明（RGBA） */
background-color: rgba(245, 100, 4, 0.5);

/* 半透明（十六进制，8位） */
background-color: #f5640480;

注意事项

背景色默认渲染到 padding 区域
透明背景不会影响元素内容的透明度
背景色不会覆盖边框

背景图片 (background-image)

语法

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

路径规则

相对路径：相对于当前 CSS 文件的位置
绝对路径：从网站根目录开始

示例

/* 相对路径 - 推荐 */
background-image: url(./images/bg.png);

/* 绝对路径 */
background-image: url(/assets/images/bg.png);

/* 网络图片 */
background-image: url(https://example.com/image.jpg);

/* 多张背景图 */
background-image: url(image1.png), url(image2.png);

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景颜色和图片</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            padding: 20px;
            background-color: rgba(245, 100, 4, 0.5);
            border: 2px solid #333;
        }

        .box2 {
            width: 500px;
            height: 400px;
            border: 50px solid #000;
            padding: 50px 40px;
            background-color: yellow;
            /* 图片地址是从当前 css 样式文件位置出发，寻找图片 */
            background-image: url(../images/luobo.png);
            background-repeat: no-repeat;
            background-size: cover;
        }

        .container {
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h3>背景颜色（带透明度）</h3>
        <div class="box1">1</div>

        <h3>背景图片</h3>
        <div class="box2"></div>
    </div>
</body>
</html>

背景简写

完整简写顺序

background:
    background-color      /* 背景颜色 */
    background-image     /* 背景图片 */
    background-repeat    /* 背景重复 */
    background-attachment/* 背景固定 */
    background-position  /* 背景位置 */
    background-size     /* 背景尺寸 */
    background-origin   /* 背景原点 */
    background-clip      /* 背景裁剪 */;

常用简写示例

/* 简单背景色 */
background: #f5f5f5;

/* 背景图片 + 不重复 + 居中 */
background: url(bg.jpg) no-repeat center;

/* 背景图片 + 不重复 + 居中 + 尺寸 */
background: url(bg.jpg) no-repeat center / cover;

/* 背景图片 + 不重复 + 居中 + 尺寸 + 颜色 */
background: url(bg.jpg) no-repeat center / cover #f5f5f5;

/* 多张背景图 */
background:
    url(icon.png) no-repeat 10px center,
    url(bg.jpg) repeat-x;

背景属性详解

1. background-color

设置元素的背景颜色。

background-color: transparent; /* 默认透明 */
background-color: red;
background-color: #ff0000;
background-color: rgb(255, 0, 0);
background-color: rgba(255, 0, 0, 0.5);

2. background-image

设置背景图片。

background-image: none; /* 默认无图片 */
background-image: url(bg.png);
background-image: linear-gradient(red, blue); /* 渐变 */

3. background-repeat

设置背景图片的重复方式。

值	说明
`repeat`	默认，水平和垂直都重复
`repeat-x`	水平重复
`repeat-y`	垂直重复
`no-repeat`	不重复

background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;

4. background-position

设置背景图片的位置。

/* 关键字 */
background-position: center;
background-position: top left;
background-position: bottom right;

/* 像素值 */
background-position: 30px 20px; /* 水平30px 垂直20px */

/* 百分比 */
background-position: 50% 50%; /* 居中 */
background-position: 10% 20%;

/* 混合值 */
background-position: 10px center;

5. background-size

设置背景图片的尺寸。

/* 具体值 */
background-size: 100px 200px; /* 宽100px 高200px */

/* 百分比（相对于容器）*/
background-size: 50% 50%;

/* 自动 */
background-size: 50% auto; /* 宽50%，高自动 */

/* 关键字 */
background-size: contain;   /* 等比缩放，完整显示 */
background-size: cover;     /* 等比缩放，完全覆盖 */
background-size: auto;      /* 默认，原始尺寸 */

6. background-attachment

设置背景图片的固定方式。

background-attachment: scroll; /* 默认，随滚动条滚动 */
background-attachment: fixed;  /* 固定，不随滚动 */
background-attachment: local; /* 随元素内容滚动 */

7. background-origin

设置背景图片的定位区域。

background-origin: padding-box; /* 默认，从padding区域开始 */
background-origin: border-box;  /* 从border区域开始 */
background-origin: content-box; /* 从content区域开始 */

8. background-clip

设置背景的裁剪区域。

background-clip: border-box;   /* 默认，延伸到border */
background-clip: padding-box;  /* 延伸到padding */
background-clip: content-box;  /* 只在content区域 */
background-clip: text;        /* 裁剪成文字形状（需webkit前缀）*/

实际应用场景

场景 1：网站背景

body {
    background: #f5f5f5 url(bg.jpg) no-repeat center center fixed;
    background-size: cover;
}

场景 2：卡片背景

.card {
    background: white url(card-bg.png) no-repeat right bottom;
    border-radius: 8px;
    padding: 20px;
}

场景 3：渐变背景

.header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

场景 4：图标背景

.icon {
    background: url(icon.svg) no-repeat center;
    background-size: contain;
    width: 32px;
    height: 32px;
}

场景 5：文字渐变背景

.gradient-text {
    background: linear-gradient(to right, #ff0000, #0000ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

注意事项

路径问题：相对路径是相对于 CSS 文件，不是 HTML 文件
性能考虑：大尺寸背景图片会影响加载速度
兼容性：某些属性（如 background-clip: text）需要浏览器前缀
渐变：渐变也属于 background-image

最佳实践

/* ✅ 推荐：使用简写属性 */
.hero {
    background: url(hero.jpg) no-repeat center center / cover #333;
}

/* ✅ 推荐：使用现代 CSS */
.card {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

/* ✅ 推荐：提供回退颜色 */
.section {
    background: #f5f5f5 url(bg.jpg) no-repeat;
}

学习笔记：背景属性是 CSS 样式的基础，掌握背景属性的用法对于美化网页非常重要。

css学习