如何使用CSS设置背景颜色和图像

在CSS中，我们可以通过背景相关的属性来灵活设置元素的背景颜色和背景图像，这些属性可以满足绝大多数页面背景样式的需求。无论是给整个页面设置纯色背景，还是给特定区块添加装饰性背景图，都可以通过对应的CSS规则实现。

一、设置背景颜色

设置背景颜色主要使用background-color属性，该属性可以接收多种格式的颜色值，包括颜色关键字、十六进制值、RGB值、HSL值等。

1. 基础用法

我们可以直接给目标元素添加background-color属性并赋值，以下是常见的使用示例：

/* 颜色关键字 */
.box1 {
    background-color: blue;
}

/* 十六进制值 */
.box2 {
    background-color: #ff6600;
}

/* RGB值 */
.box3 {
    background-color: rgb(255, 255, 255);
}

/* HSL值 */
.box4 {
    background-color: hsl(120, 100%, 50%);
}

2. 透明背景设置

如果需要设置半透明背景，可以使用RGBA或者HSLA格式，其中A通道表示透明度，取值范围是0到1，0表示完全透明，1表示完全不透明：

.transparent-box {
    /* 半透明红色背景 */
    background-color: rgba(255, 0, 0, 0.5);
}

二、设置背景图像

设置背景图像需要使用background-image属性，属性值通过url()函数指定图像的路径，路径可以是相对路径、绝对路径或者网络地址。

1. 基础引入方式

以下是引入背景图像的基础示例：

/* 引入本地图像 */
.bg-img {
    background-image: url(./images/bg.jpg);
}

/* 引入网络图像 */
.net-bg {
    background-image: url(https://ipipp.com/images/demo.png);
}

2. 背景图像的常用配套属性

引入背景图像后，通常还需要配合其他背景属性调整图像的显示效果，常用的属性如下：

• background-repeat：设置背景图像是否重复，可选值有repeat（默认，水平和垂直都重复）、repeat-x（仅水平重复）、repeat-y（仅垂直重复）、no-repeat（不重复）。
• background-position：设置背景图像的位置，可以使用方位关键字（left、right、top、bottom、center）、百分比或者具体像素值。
• background-size：设置背景图像的尺寸，可选值有cover（等比缩放覆盖整个元素，可能裁剪图像）、contain（等比缩放让图像完整显示在元素内，可能有留白）、具体尺寸值。
• background-attachment：设置背景图像是否随页面滚动，可选值有scroll（默认，随元素滚动）、fixed（相对于视口固定，不随滚动条滚动）。

以下是这些属性的组合使用示例：

.full-bg {
    /* 引入背景图 */
    background-image: url(./images/background.png);
    /* 不重复背景图 */
    background-repeat: no-repeat;
    /* 背景图居中显示 */
    background-position: center center;
    /* 背景图覆盖整个元素 */
    background-size: cover;
    /* 背景图固定不随滚动 */
    background-attachment: fixed;
}

三、使用background简写属性

CSS还提供了background简写属性，可以把多个背景相关的属性写在一个声明中，简化代码。简写属性的顺序没有严格要求，不过通常的书写顺序是：background-color background-image background-repeat background-attachment background-position/background-size，其中background-position和background-size需要用/分隔。

以下是简写属性的使用示例：

/* 简写设置背景 */
.short-bg {
    background: #f5f5f5 url(./images/icon.png) no-repeat scroll center center/30px 30px;
}

四、多背景图像设置

CSS还支持为一个元素设置多个背景图像，多个背景图像的路径用逗号分隔，先写的图像会显示在最上层，后写的图像显示在下层。

.multi-bg {
    /* 上层是小的装饰图，下层是大的背景图 */
    background-image: url(./images/decorate.png), url(./images/main_bg.jpg);
    background-repeat: no-repeat, repeat;
    background-position: right top, left top;
}

五、注意事项

• 如果同时设置了background-color和background-image，背景颜色会显示在背景图像的下方，当背景图像无法覆盖整个元素或者背景图像透明时，背景颜色会显示出来。
• 设置背景图像时，如果图像路径错误或者图像加载失败，元素会显示background-color设置的颜色，如果没有设置背景颜色则显示透明。
• 使用background-size: cover时，如果元素的宽高比和图像的宽高比不一致，图像会被裁剪，需要提前确认设计需求是否允许裁剪。

CSSbackground_colorbackground_imagebackground属性修改时间：2026-06-18 13:21:45