CSS 背景属性

前言

---

背景属性 

属性	说明
background-color	背景颜色
background-image	背景图
background-repeat	背景图平铺方式
background-position	背景图位置
background-size	背景图缩放
background-attachment	背景图固定
background	背景复合属性

---

背景颜色

可以使用background-color属性来设置背景颜色。

示例：

1.使用颜色关键字：直接使用预定义的颜色名称来设置背景颜色。

.element {
    background-color: green;  /* 绿色 */
}

2.使用十六进制值：使用红、绿、蓝三原色的十六进制来指定颜色。

.element {
    background-color: #ff000f;  /* 红色 */
}

3.使用RGB值：使用红、绿、蓝三原色的整数值来指定颜色。

.element {
    background-color: rgb(0, 255, 0);  /* 绿色 */
}

4.使用RGBA：类似于RGB值，还可以通过添加第四个参数来指定透明度。

.element {
    background-color: rgba(11, 65, 212, 0.5);  /* 淡蓝色 */
}

上述示例中.element是要应用背景颜色的元素选择器。 

预览：

---

背景图

可以使用background-image属性来指定一个图像作为元素的背景图。

以下是一种基本的设置背景图像的方式：

.element {
    background-image: url("image.jpg");
}

上面示例中，.element 是要应用背景图像的元素选择器，url("image.jpg")是指向你要使用的图像的路径。

预览：

---

背景图平铺方式

可以使用background-repeat属性来设置背景图的平铺方式。下面是常见的属性值：

属性值	说明
repeat	默认值，当图像尺寸小于元素尺寸时，会水平和垂直方向上重复平铺图像。
repeat-x	图像仅在水平方向上重复平铺，垂直方向不会重复。
repeat-y	图像仅在垂直方向上重复平铺，水平方向不会重复。
no-repeat	图像不会被平铺，只会显示一次。

示例：

1.背景图不进行平铺，只显示一次：

.element {
    background-repeat: no-repeat;
}

预览：

---

2.背景图只在水平方向上重复平铺：

.element {
    background-repeat: repeat-x;
}

预览：

---

背景图位置

可以使用background-position属性来设置背景图像的位置。这个属性可以接受不同的值，用于指定图像在元素中的起始位置。

下面是一些常见的取值方式：

1.关键字：

关键字	位置
left	左侧
right	右侧
center	居中
top	顶部
bottom	底部

 示例：

将图像置于顶部居中：

.element {
    background-position: top center;
}

预览：

---

2.坐标：使用像素（px）单位指定水平或垂直方向上的偏移量。在水平方向，正数向右，负数向左；在垂直方向，正数向下，负数向上。

示例：

将图像向右偏移20像素，向下偏移30像素：

.element {
    background-position: 20px 30px;
}

预览：

---

背景图缩放

可以使用background-size属性来控制背景图像的缩放方式。这个属性允许你调整背景图像的尺寸以适应元素的大小。

以下是一些常见的取值方式：

1.关键字：

关键字	说明
auto	默认值，保持图像的原始尺寸。如果图像比元素大，在默认情况下会被裁剪。
cover	按比例缩放图像，使其完全适应元素的背景区域。可能会裁剪图像的某个区域。
contain	按比例缩放图像，使其完全适应元素的背景区域。可能会出现空白区域，不会进行裁剪。

示例：

1）图像不平铺情况下预览：

---

2）将背景图像完全适应元素的背景区域，不进行裁剪：

.element {
    background-size: contain;
}

预览：

---

3）按比例缩放图像，使其覆盖整个元素的背景区域：

.element {
    background-size: cover;
}

预览：

---

2.百分比：使用百分比来设置图像的宽度和高度相对于元素大小的比例。

示例：

将图像的宽度设为元素宽度的50%，高度设为元素高度的75%：

.element {
    background-size: 50% 75%;
}

 预览：

---

3.长度：使用具体的长度值来设置图像的宽度和高度。

示例：

将图像宽度设为150像素，高度设为150像素：

.element {
    background-size: 150px 150px;
}

预览：

---

背景图固定

可以使用background-attachment属性来控制背景图像是否固定在视口中，以实现固定背景图像效果。

常用取值：

关键字	说明
scroll	默认值，背景图像会随页面滚动而滚动。
fixed	背景图固定在视口中，不会随页面滚动而移动。

示例：

.element {
    background-attachment: fixed;
}

可以实现背景图像固定，而内容随页面滚动而移动，如下所示：

---

背景图复合属性

可以使用background属性来同时设置多个背景相关属性。

语法：

空格隔开各个属性值，不区分顺序。

background: <背景色> <背景图像> <背景平铺方式> <背景缩放/背景位置> <背景固定>;

示例：

.element {
    background: red url("../images/小丑.jpg") no-repeat right center/cover;
}