用最通俗的语言带你读懂CSS的背景属性

CSS背景属性允许你为元素添加背景颜色和背景图片。CSS3还提供了背景使用多张图片和渐变色的功能。

背景颜色

背景颜色属性(background-color)允许你为元素设置一个纯色背景。颜色可以使用十六进制值、RGB 值或颜色名称来指定。例如，以下代码将为元素设置一个红色的背景：

background-color: red;

你也可以使用RGBA值来指定颜色，其中A代表alpha通道，用于设置颜色的透明度。例如，以下代码将为元素设置一个半透明的红色背景：

background-color: rgba(255, 0, 0, 0.5);

背景图片

背景图片属性(background-image)允许你为元素设置一个背景图片。图片可以使用URL来指定。例如，以下代码将为元素设置一个名为“background.jpg”的背景图片：

background-image: url("background.jpg");

你还可以使用多个背景图片。例如，以下代码将为元素设置两个背景图片，第一个是“background1.jpg”，第二个是“background2.jpg”：

background-image: url("background1.jpg"), url("background2.jpg");

背景重复

背景重复属性(background-repeat)允许你控制背景图片的重复方式。有以下几个值可以选择：

• repeat：背景图片将重复地平铺整个元素。
• repeat-x：背景图片将只在水平方向重复。
• repeat-y：背景图片将只在垂直方向重复。
• no-repeat：背景图片将不会重复。

例如，以下代码将使背景图片在水平方向重复：

background-repeat: repeat-x;

背景位置

背景位置属性(background-position)允许你控制背景图片的位置。有以下几个值可以选择：

• left：背景图片将放在元素的左侧。
• center：背景图片将放在元素的中间。
• right：背景图片将放在元素的右侧。
• top：背景图片将放在元素的顶部。
• bottom：背景图片将放在元素的底部。

例如，以下代码将使背景图片放在元素的左上角：

background-position: left top;

背景大小

背景大小属性(background-size)允许你控制背景图片的大小。有以下几个值可以选择：

• auto：背景图片将自动调整大小，以适应元素的大小。
• contain：背景图片将被缩小或放大，以完全适应元素的大小。
• cover：背景图片将被缩小或放大，以完全覆盖元素的大小。

例如，以下代码将使背景图片完全覆盖元素的大小：

background-size: cover;

渐变背景

CSS3还提供了背景使用渐变色的功能。渐变背景可以使用linear-gradient()、radial-gradient()和conic-gradient()三个函数来创建。

• linear-gradient()：创建一个线性渐变背景。
• radial-gradient()：创建一个径向渐变背景。
• conic-gradient()：创建一个圆锥渐变背景。

例如，以下代码创建一个从红色到蓝色的线性渐变背景：

background: linear-gradient(to right, red, blue);