background复合属性的使用

一、背景相关属性值

1、背景颜色（`background-color`）

background-color属性定义了元素的背景颜色。

background-color: color;

值 ------------------------------------------> 描述

transparent ------------------------------>默认。背景颜色为透明。

background-color: red-------------> 规定颜色值为颜色名称的背景颜色

background-color: #fff -------------->规定颜色值为十六进制值的背景颜色

background-color: rgb(255,0,0)------->规定颜色值为 rgb 代码的背景颜色。

background-color:rgba(255,255,255,0.7)------->规定颜色值为 rgba代码的背景颜色

等价于

background:rgba(255,255,255,0.7)-------------->规定颜色值为 rgba代码的背景颜色

inherit -------------------------->规定应该从父元素继承 background-color 属性的设置。

一般情况下，元素背景颜色默认值是transparent，是透明的。

2、背景图片颜色（background-image）

background-image属性描述了元素的背景图片，实际开发常见于 logo 、一些装饰性的小图片或是超大的背景图片，优点是非常便于控制位置。

background-image: url(./img/小图.webp); 可以同时设置背景色，和背景图片，如果同时设置，背景色是在背景图片下面

    图片在元素中位置：

               如果背景图片大于元素，默认是显示图片左上角

               如果一样大，则正常全部显示

               如果图片小于元素，则默认情况下，背景图片会平铺充满元素

3、背景图片重复方式（background-repeat）

background-repeat可以实现对背景图片平铺的控制。

background-repeat: repeat | no-repeat | repeat-x | repeat-y ; 参数值作用 repeat 背景图片在纵向和横向上平铺（默认值） no-repeat 不平铺 repeat-x 在横向上平铺（水平方向） repeat-y 在纵向上平铺（垂直方向）

4、背景图片位置（background-position）

设置background-position属性 :可以改变图片在背景中的位置。

background-position: x y;

x 、y代表的是 x 坐标和 y 坐标，可以使用方位名词或者精确单位。

参数值说明

如果指定的两个值都是方位名词，则两个值的位置顺序可以互换，不影响显示效果。

比如，right top 和 top right 效果是一样的

如果只指定了一个值，那么省略的另一个值默认为居中 center

如果参数是精确单位：

那么第一个值肯定是 x 坐标，第二个值肯定是 y 坐标，有严格的顺序如果只指定了一个数值，那么该数值一定是 x 坐标，另一个默认垂直居中如果参数是混合单位：

则第一个值是 x 坐标，第二个值是 y 坐标

第一个值，是水平的偏移量可正（向右）可负（向左）

第二个值，是垂直的偏移量可正（向下）可负（向上）

5、背景范围（background-clip）

background-clip: ; 设置背景的范围

参数值作用 border-box

默认值，背景色会出现在边框下面

padding-box

背景就不会出现在边框下，出现在内容区和内边距区

content-box 背景图出现在内容区下面

6、背景图片偏移原点（background-origin）

background-origin: ; 设置背景图片偏移量原点

参数值作用 border-box

从边框开始计算偏移量

padding-box

默认值，从内边距开始计算

content-box 从内容区开始计算偏移量

7、背景图片大小（background-size）

background-size: ; 设置背景图片的大小

1: 参数

             第一个值：宽度

             第二个值：高度

               如果只写一个，第二个值，为auto

            2:cover  图片的比例不变，将元素铺满

              contain  图片比例不变，将元素完整显示

二、background简写方式

为了简化背景属性的代码，可以将这些属性合并简写在同一个属性background中，从而节约代码量。

当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：

background: 背景颜色背景图片地址背景重复方式（平铺）背景图片位置/背景图片大小;

eg：background:red url(./img/小图.webp) no-repeat center/cover;

注意：background-size必须要写在 background-position的后面

补充：背景颜色渐变 (linear-gradient/radial-gradient)

渐变：一种复杂的背景颜色，一种颜色向另一种颜色的过渡

渐变更像一种图片，通过background-image设置

```/* background-color: red; */
```/* background-image: linear-gradient(80deg,red,yellow,green); */
```/* background-image: repeating-linear-gradient(red 50px ,yellow 150px); */
```background-image: radial-gradient(red,yellow);

可选值：

1.linear-gradient(方位，颜色1，颜色2···)

参数: 方位（不写，默认从上到下to bottom）

(1)to left , to right ,to bottom ,to top

(2)turn 表示圈

(3)xxxdeg 表示角度度数

2. repeating-linear-gradient() 平铺线性渐变

3.radial-gradient() 放射渐变

参数：

1:圆心的形状(默认是根据元素的形状来计算的)

（1）circle 圆形

（2）ellipse 椭圆

（3）设置圆心的大小宽度高度

background复合属性

background复合属性 的使用