CSS 背景样式详解：颜色、图片与属性复合写法

详细讲解 CSS 背景样式属性。涵盖背景颜色 background-color、背景图片 background-image、平铺方式 background-repeat、位置定位 background-position 及图像固定 background-attachment。介绍背景属性复合简写写法 background，以及使用 rgba 实现背景色半透明的方法。提供完整 HTML 代码示例演示各属性应用效果，并列出 MDN 等权威参考资源。

云朵棉花糖发布于 2026/4/6更新于 2026/9/874 浏览

CSS 背景样式全解析

在网页设计中，背景样式是塑造页面视觉效果的关键元素之一。通过 CSS 的背景属性，我们可以为页面添加丰富的视觉效果，包括背景颜色、背景图片、平铺方式、定位以及固定等。

4.1 背景颜色 (`background-color`)

背景颜色是最基础的背景属性，用于设置元素的背景色。

div {
    width: 200px;
    height: 200px;
    /* 默认值为 transparent（透明） */
    /* background-color: transparent; */
    background-color: pink;
}

默认值：transparent（透明）
可接受的值：颜色名称、十六进制值、RGB 值、RGBA 值
应用场景：为元素提供基础底色，或作为背景图片的补充

4.2 背景图片 (`background-image`)

使用背景图片可以为元素添加更丰富的视觉效果。

#image-test {
    width: 200px;
    height: 340px;
    background-image: url(picture/Q.png);
}

语法：background-image: none | url(图片地址)
默认值：none（无背景图）
实际应用：常用于 logo、装饰性小图片或超大背景图，便于精确控制位置

4.3 背景平铺 (`background-repeat`)

控制背景图片是否以及如何在元素中平铺。

#image-test {
    background-image: url(picture/Q.png);
    /* 可选值：repeat | no-repeat | repeat-x | repeat-y */
    background-repeat: no-repeat;
}

repeat：默认值，在水平和垂直方向都平铺
no-repeat：不平铺，只显示一次
repeat-x：仅在水平方向平铺
repeat-y：仅在垂直方向平铺

注意：背景图片会覆盖背景颜色

4.4 背景图片位置 (`background-position`)

精确控制背景图片在元素中的位置。

#image-test {
    background-image: url(picture/Q.png);
    background-repeat: no-repeat;
    /* 语法：background-position: x y; */
    background-position: right center;
}

位置参数可以是：

方位名词：left、center、right（水平方向）；top、center、bottom（垂直方向）
精确单位：像素 (px)、百分比 (%) 等
混合单位：方位名词与精确单位结合

使用规则：

两个方位名词：顺序无关，如 left top 与 top left 效果相同
一个方位名词：另一个方向默认居中
精确单位：第一个值是 x 坐标，第二个值是 y 坐标
混合单位：第一个值是 x 坐标，第二个值是 y 坐标

示例应用：为文字添加小图标

h3 {
    width: 118px;
    height: 40px;
    font-size: 14px;
    text-indent: 1.2em;
    line-height: 40px;
    font-weight: 400;
    background-image: url(picture/down.jpeg);
    background-repeat: no-repeat;
    background-position: left center;
}

4.5 背景图像固定 (`background-attachment`)

控制背景图片是否随页面滚动而移动，常用于制作视差滚动效果。

body {
    background-image: url(https://game.gtimg.cn/images/yxzj/web202311/bg-5ada2842.png);
    background-repeat: no-repeat;
    background-position: center 0px;
    background-attachment: fixed;
    /* 背景图像固定 */
}

scroll：默认值，背景图像随内容滚动
fixed：背景图像固定不动

4.6 背景属性复合写法

为了简化代码，CSS 允许将多个背景属性合并为一个简写属性。

body {
    /* 复合写法顺序：颜色 图片 平铺 滚动 位置 */
    background: black url(https://game.gtimg.cn/images/yxzj/web202311/bg-5ada2842.png) no-repeat fixed center 0px;
}

复合写法没有严格的顺序要求，但建议遵循约定顺序： background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置

4.7 背景色半透明 (`rgba`)

通过 RGBA 颜色值可以实现背景色的半透明效果，而不影响元素内的文本内容。

div {
    width: 300px;
    height: 300px;
    /* 最后一个参数是透明度，0~1 之间 | 0.3 也可以写成 .3*/
    background-color: rgba(245, 5, 5, 0.3);
}

语法：background: rgba(red, green, blue, alpha);
alpha 参数：0 表示完全透明，1 表示完全不透明（0.3 可以写成 .3，其他同理）
特点：仅使背景色半透明，内容不受影响

综合代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 背景</title>
    <!-- 通过 CSS 背景属性，可以给页面添加背景样式 -->
    <!-- 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等 -->
    <style>
        /* 111.--------- 背景颜色 -------- 语法：background-color:颜色值 一般情况下，背景颜色默认值是 transparent(透明)，我们也可以手动指定背景颜色为透明色 */
        div {
            width: 200px;
            height: 200px;
            /* transparent(透明的，清澈的) */
            /* background-color: transparent; */
            background-color: pink;
        }
        
        /* 222.--------- 背景图片 ------------ 语法：background-image:none | url(url) 参数：none（无背景图，默认） url(使用绝对或相对地址指定背景图像) background-image 属性描述了元素的背景图像，实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置 (因为有 background-position 控制插入位置) （精灵图也是一种运用场景） */
        #image-test {
            width: 200px;
            height: 340px;
            background-image: url(picture/Q.png);
            /* background-repeat: repeat; */
            /* background-repeat: repeat-x; */
            /* background-repeat: repeat-y; */
            background-repeat: no-repeat;
            /* background-position: center(y) right(x); 与下面等价，跟顺序没有关系 */
            /* background-position: right(x) center(y); */
            /* 此时，第一个参数是 x 轴，水平 (x) 一定是靠右侧对齐;第二个参数省略 y 轴，则竖直方向是居中显示的 */
            /* background-position: right; */
            /* 此时，第一个参数一定是 y 轴，顶部对齐;第二个参数省略 x ,则水平方向是居中显示的 */
            background-position: top;
        }
        
        /* 333.-------- 背景平铺 ------------ 如果需要在 HTML 页面上对背景图片进行平铺，可以使用 background-repeat 属性 语法：background-repeat: repeat | no-repeat | repeat-x | repeat-y 1. repeat 背景图像在纵向和横向上平铺 (默认的) 2. no-repeat 背景图像不平铺 (不重复，只会显示一次) 3. repeat-x 背景图像在横向上平铺 4. repeat-y 背景图像在纵向平铺 注意：背景图片会覆盖掉背景颜色 */
        
        /* 444.--------- 背景图片位置 --------- 利用 background-position 属性可以改变图片在背景中的位置 语法：background-position: x y; 参数代表的意思是：x 坐标 和 y 坐标。可以使用方位名词或精确单位 参数值： 1.length --》百分数 | 由浮点数字和单位标识符组成的长度值 2.position --》top | center | bottom (这三个是竖直方向 (y) 上)| left | center | right (这三个是水平方向 (x) 上)方位名词 注意事项： 11.参数是方位名词： 1.如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top(左上) 和 top left（上左）效果一样 2.如果只指定了一个方位名词 (如果第一个参数是 x，则第二个为 y，反之同理)，另一个值省略，则第二个值默认居中对齐 22.参数是精确单位： 1.如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个肯定是 y 坐标 2.如果只指定一个竖直，那么该数值一定是 x 坐标，另外一个默认垂直居中平 33.参数是混合单位： 1.如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标 *//* 参数是方位名词 */
        h3 {
            width: 118px;
            height: 40px;
            /* background-color: skyblue; */
            /* 字体大小修正 */
            font-size: 14px;
            /* 文字开头间隔 */
            text-indent: 1.2em;
            /* 实现文字水平居中 */
            line-height: 40px;
            /* 取消文字加粗 */
            font-weight: 400;
            background-image: url(picture/down.jpeg);
            background-repeat: no-repeat;
            /* ----方位名词----*/
            background-position: left center;
        }
        
        /* 超大王者荣耀背景图片 (注意下面也有一个用于测试混合单位的 body) *//* body { background-image: url(picture/nonyao.webp); background-repeat: no-repeat; 方位名词 (取消 body 注释后，把这个注释掉) background-position: center top; } *//* 参数是精确单位 */
        #image-test2 {
            width: 200px;
            height: 340px;
            background-image: url(picture/Q.png);
            background-repeat: no-repeat;
            /* 50px 20px --> x 轴一定是 50px y 轴一定是 20px *//* background-position: 50px 20px; *//* 80px 一定是 x 坐标，另外一个默认垂直居中 */
            background-position: 80px;
        }
        
        /* 参数是混合单位 *//* 超大王者荣耀背景图片 *//* body { background-image: url(https://game.gtimg.cn/images/yxzj/web202311/bg-5ada2842.png); background-repeat: no-repeat; 混合单位 第一个单位一定是 x，第二个单位一定是 y background-position: center 0px; } *//* 555.------- 背景图像固定 (背景附着) ------ background-attachment 属性设置图像是否固定或者随着页面的其余部分滚动 (后期可以制作视差滚动效果) 语法：background-attachment: scroll | fixed 参数：scroll --》背景图像是随对象内容滚动 (默认，正常效果) fixed --》背景图像固定 *//* 666.------- 背景属性复合写法 -------- 当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为： background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置 */
        body {
            /* background-image: url(https://game.gtimg.cn/images/yxzj/web202311/bg-5ada2842.png); background-repeat: no-repeat; background-position: center 0px; */
            color: white;
            /* 测试背景图像固定 *//* background-attachment: fixed; */
            background-color: black;
            /* 测试背景属性复合写法 */
            background: black url(https://game.gtimg.cn/images/yxzj/web202311/bg-5ada2842.png) no-repeat fixed center 0px;
        }
        
        /* 777.--------- 背景色半透明 --------- 语法：background: rgba(0,0,0,0.3); (数值仅仅为举例子) 1.最后一个参数是 alpha(透明度),取值范围在 0~1 之间 (0 为完全透明，1 为完全不透明 (跟原来一样),从 1->0，越来越透明) 2.背景半透明指的是盒子背景色半透明，盒子里面的文本内容不受影响 3.后面必须是 4 个值 */
        div {
            width: 300px;
            height: 300px;
            /* background-color: black; *//* 0.3 也可以写成 .3 */
            background-color: rgba(245, 5, 5, .3);
        }
    </style>
</head>
<body>
    <!-- 测试背景固定 -->
    <p>天王盖地虎，宝塔镇河妖</p>
    <p>天王盖地虎，宝塔镇河妖</p>
    <p>天王盖地虎，宝塔镇河妖</p>
    <p>天王盖地虎，宝塔镇河妖</p>
    <p>天王盖地虎，宝塔镇河妖</p>
    <p>天王盖地虎，宝塔镇河妖</p>
    <p>天王盖地虎，宝塔镇河妖</p>
    <p>天王盖地虎，宝塔镇河妖</p>
    <p>天王盖地虎，宝塔镇河妖</p>
    <p>天王盖地虎，宝塔镇河妖</p>
    <p>天王盖地虎，宝塔镇河妖</p>
    <p>天王盖地虎，宝塔镇河妖</p>
    <p>天王盖地虎，宝塔镇河妖</p>
    <p>天王盖地虎，宝塔镇河妖</p>
    <p>天王盖地虎，宝塔镇河妖</p>
    <p>天王盖地虎，宝塔镇河妖</p>
    <p>天王盖地虎，宝塔镇河妖</p>
    <p>天王盖地虎，宝塔镇河妖</p>
    <p>天王盖地虎，宝塔镇河妖</p>
    <p>天王盖地虎，宝塔镇河妖</p>
    <p>天王盖地虎，宝塔镇河妖</p>
    <p>天王盖地虎，宝塔镇河妖</p>
    <p>天王盖地虎，宝塔镇河妖</p>
    <p>天王盖地虎，宝塔镇河妖</p>
    <p>天王盖地虎，宝塔镇河妖</p>
    <p>天王盖地虎，宝塔镇河妖</p>
    <p>天王盖地虎，宝塔镇河妖</p>
    <p>天王盖地虎，宝塔镇河妖</p>
    <p>天王盖地虎，宝塔镇河妖</p>
    <p>天王盖地虎，宝塔镇河妖</p>
    <p>天王盖地虎，宝塔镇河妖</p>
    <p>天王盖地虎，宝塔镇河妖</p>
    <p>天王盖地虎，宝塔镇河妖</p>
    <p>天王盖地虎，宝塔镇河妖</p>
    <p>天王盖地虎，宝塔镇河妖</p>
    <p>天王盖地虎，宝塔镇河妖</p>
    <p>天王盖地虎，宝塔镇河妖</p>
    <p>天王盖地虎，宝塔镇河妖</p>
    <p>天王盖地虎，宝塔镇河妖</p>
    <p>天王盖地虎，宝塔镇河妖</p>
    <!-- 测试背景透明化 -->
    <div>看看文字是否会被透明化</div>
</body>
</html>

显示效果：

效果展示

学习资源推荐

MDN Web Docs - 最权威的 CSS 参考文档
W3Schools - 包含丰富的示例和在线编辑器
菜鸟编程 - 讲解详细的宝藏网站

CSS 背景样式详解：颜色、图片与属性复合写法

云朵棉花糖发布于 2026/4/6更新于 2026/9/874 浏览

h3 { width: 118px; height: 40px; font-size: 14px; text-indent: 1.2em; line-height: 40px; font-weight: 400; background-image: url(picture/down.jpeg); background-repeat: no-repeat; background-position: left center; }

body { background-image: url(https://game.gtimg.cn/images/yxzj/web202311/bg-5ada2842.png); background-repeat: no-repeat; background-position: center 0px; background-attachment: fixed; /* 背景图像固定 */ }

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS 背景</title>   <style> /* 111.--------- 背景颜色 -------- 语法：background-color:颜色值一般情况下，背景颜色默认值是 transparent(透明)，我们也可以手动指定背景颜色为透明色 */ div { width: 200px; height: 200px; /* transparent(透明的，清澈的) */ /* background-color: transparent; */ background-color: pink; } /* 222.--------- 背景图片 ------------ 语法：background-image:none | url(url) 参数：none（无背景图，默认） url(使用绝对或相对地址指定背景图像) background-image 属性描述了元素的背景图像，实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置 (因为有 background-position 控制插入位置) （精灵图也是一种运用场景） */ #image-test { width: 200px; height: 340px; background-image: url(picture/Q.png); /* background-repeat: repeat; */ /* background-repeat: repeat-x; */ /* background-repeat: repeat-y; */ background-repeat: no-repeat; /* background-position: center(y) right(x); 与下面等价，跟顺序没有关系 */ /* background-position: right(x) center(y); */ /* 此时，第一个参数是 x 轴，水平 (x) 一定是靠右侧对齐;第二个参数省略 y 轴，则竖直方向是居中显示的 */ /* background-position: right; */ /* 此时，第一个参数一定是 y 轴，顶部对齐;第二个参数省略 x ,则水平方向是居中显示的 */ background-position: top; } /* 333.-------- 背景平铺 ------------ 如果需要在 HTML 页面上对背景图片进行平铺，可以使用 background-repeat 属性语法：background-repeat: repeat | no-repeat | repeat-x | repeat-y 1. repeat 背景图像在纵向和横向上平铺 (默认的) 2. no-repeat 背景图像不平铺 (不重复，只会显示一次) 3. repeat-x 背景图像在横向上平铺 4. repeat-y 背景图像在纵向平铺注意：背景图片会覆盖掉背景颜色 */ /* 444.--------- 背景图片位置 --------- 利用 background-position 属性可以改变图片在背景中的位置语法：background-position: x y; 参数代表的意思是：x 坐标和 y 坐标。可以使用方位名词或精确单位参数值： 1.length --》百分数 | 由浮点数字和单位标识符组成的长度值 2.position --》top | center | bottom (这三个是竖直方向 (y) 上)| left | center | right (这三个是水平方向 (x) 上)方位名词注意事项： 11.参数是方位名词： 1.如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top(左上) 和 top left（上左）效果一样 2.如果只指定了一个方位名词 (如果第一个参数是 x，则第二个为 y，反之同理)，另一个值省略，则第二个值默认居中对齐 22.参数是精确单位： 1.如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个肯定是 y 坐标 2.如果只指定一个竖直，那么该数值一定是 x 坐标，另外一个默认垂直居中平 33.参数是混合单位： 1.如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标 *//* 参数是方位名词 */ h3 { width: 118px; height: 40px; /* background-color: skyblue; */ /* 字体大小修正 */ font-size: 14px; /* 文字开头间隔 */ text-indent: 1.2em; /* 实现文字水平居中 */ line-height: 40px; /* 取消文字加粗 */ font-weight: 400; background-image: url(picture/down.jpeg); background-repeat: no-repeat; /* ----方位名词----*/ background-position: left center; } /* 超大王者荣耀背景图片 (注意下面也有一个用于测试混合单位的 body) *//* body { background-image: url(picture/nonyao.webp); background-repeat: no-repeat; 方位名词 (取消 body 注释后，把这个注释掉) background-position: center top; } *//* 参数是精确单位 */ #image-test2 { width: 200px; height: 340px; background-image: url(picture/Q.png); background-repeat: no-repeat; /* 50px 20px --> x 轴一定是 50px y 轴一定是 20px *//* background-position: 50px 20px; *//* 80px 一定是 x 坐标，另外一个默认垂直居中 */ background-position: 80px; } /* 参数是混合单位 *//* 超大王者荣耀背景图片 *//* body { background-image: url(https://game.gtimg.cn/images/yxzj/web202311/bg-5ada2842.png); background-repeat: no-repeat; 混合单位第一个单位一定是 x，第二个单位一定是 y background-position: center 0px; } *//* 555.------- 背景图像固定 (背景附着) ------ background-attachment 属性设置图像是否固定或者随着页面的其余部分滚动 (后期可以制作视差滚动效果) 语法：background-attachment: scroll | fixed 参数：scroll --》背景图像是随对象内容滚动 (默认，正常效果) fixed --》背景图像固定 *//* 666.------- 背景属性复合写法 -------- 当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为： background:背景颜色背景图片地址背景平铺背景图像滚动背景图片位置 */ body { /* background-image: url(https://game.gtimg.cn/images/yxzj/web202311/bg-5ada2842.png); background-repeat: no-repeat; background-position: center 0px; */ color: white; /* 测试背景图像固定 *//* background-attachment: fixed; */ background-color: black; /* 测试背景属性复合写法 */ background: black url(https://game.gtimg.cn/images/yxzj/web202311/bg-5ada2842.png) no-repeat fixed center 0px; } /* 777.--------- 背景色半透明 --------- 语法：background: rgba(0,0,0,0.3); (数值仅仅为举例子) 1.最后一个参数是 alpha(透明度),取值范围在 0~1 之间 (0 为完全透明，1 为完全不透明 (跟原来一样),从 1->0，越来越透明) 2.背景半透明指的是盒子背景色半透明，盒子里面的文本内容不受影响 3.后面必须是 4 个值 */ div { width: 300px; height: 300px; /* background-color: black; *//* 0.3 也可以写成 .3 */ background-color: rgba(245, 5, 5, .3); } </style> </head> <body>  天王盖地虎，宝塔镇河妖 天王盖地虎，宝塔镇河妖 天王盖地虎，宝塔镇河妖 天王盖地虎，宝塔镇河妖 天王盖地虎，宝塔镇河妖 天王盖地虎，宝塔镇河妖 天王盖地虎，宝塔镇河妖 天王盖地虎，宝塔镇河妖 天王盖地虎，宝塔镇河妖 天王盖地虎，宝塔镇河妖 天王盖地虎，宝塔镇河妖 天王盖地虎，宝塔镇河妖 天王盖地虎，宝塔镇河妖 天王盖地虎，宝塔镇河妖 天王盖地虎，宝塔镇河妖 天王盖地虎，宝塔镇河妖 天王盖地虎，宝塔镇河妖 天王盖地虎，宝塔镇河妖 天王盖地虎，宝塔镇河妖 天王盖地虎，宝塔镇河妖 天王盖地虎，宝塔镇河妖 天王盖地虎，宝塔镇河妖 天王盖地虎，宝塔镇河妖 天王盖地虎，宝塔镇河妖 天王盖地虎，宝塔镇河妖 天王盖地虎，宝塔镇河妖 天王盖地虎，宝塔镇河妖 天王盖地虎，宝塔镇河妖 天王盖地虎，宝塔镇河妖 天王盖地虎，宝塔镇河妖 天王盖地虎，宝塔镇河妖 天王盖地虎，宝塔镇河妖 天王盖地虎，宝塔镇河妖 天王盖地虎，宝塔镇河妖 天王盖地虎，宝塔镇河妖 天王盖地虎，宝塔镇河妖 天王盖地虎，宝塔镇河妖 天王盖地虎，宝塔镇河妖 天王盖地虎，宝塔镇河妖 天王盖地虎，宝塔镇河妖  <div>看看文字是否会被透明化</div> </body> </html>

CSS 背景样式详解：颜色、图片与属性复合写法

CSS 背景样式全解析

4.1 背景颜色 (`background-color`)

4.2 背景图片 (`background-image`)

4.3 背景平铺 (`background-repeat`)

4.4 背景图片位置 (`background-position`)

4.5 背景图像固定 (`background-attachment`)

4.6 背景属性复合写法

4.7 背景色半透明 (`rgba`)

综合代码演示

学习资源推荐

CSS 背景样式详解：颜色、图片与属性复合写法

CSS 背景样式全解析

4.1 背景颜色 (`background-color`)

4.2 背景图片 (`background-image`)

4.3 背景平铺 (`background-repeat`)

4.4 背景图片位置 (`background-position`)

4.5 背景图像固定 (`background-attachment`)

4.6 背景属性复合写法

4.7 背景色半透明 (`rgba`)

综合代码演示

学习资源推荐

更多推荐文章

相关免费在线工具

更多推荐文章

相关免费在线工具

CSS 背景样式详解：颜色、图片与属性复合写法

CSS 背景样式全解析

4.1 背景颜色 (background-color)

4.2 背景图片 (background-image)

4.3 背景平铺 (background-repeat)

4.4 背景图片位置 (background-position)

4.5 背景图像固定 (background-attachment)

4.6 背景属性复合写法

4.7 背景色半透明 (rgba)

综合代码演示

学习资源推荐

CSS 背景样式详解：颜色、图片与属性复合写法

CSS 背景样式全解析

4.1 背景颜色 (background-color)

4.2 背景图片 (background-image)

4.3 背景平铺 (background-repeat)

4.4 背景图片位置 (background-position)

4.5 背景图像固定 (background-attachment)

4.6 背景属性复合写法

4.7 背景色半透明 (rgba)

综合代码演示

学习资源推荐

更多推荐文章

相关免费在线工具

更多推荐文章

相关免费在线工具

4.1 背景颜色 (`background-color`)

4.2 背景图片 (`background-image`)

4.3 背景平铺 (`background-repeat`)

4.4 背景图片位置 (`background-position`)

4.5 背景图像固定 (`background-attachment`)

4.7 背景色半透明 (`rgba`)

4.1 背景颜色 (`background-color`)

4.2 背景图片 (`background-image`)

4.3 背景平铺 (`background-repeat`)

4.4 背景图片位置 (`background-position`)

4.5 背景图像固定 (`background-attachment`)

4.7 背景色半透明 (`rgba`)