背景相关的属性值

目录

一、背景相关属性值

1、背景颜色（background-color）

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

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

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

5、背景范围（background-clip）

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

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

二、background简写方式

 补充：背景颜色渐变

---

通过CSS背景属性，可以给页面元素添加背景样式。

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置等。

一、背景相关属性值

1、背景颜色（background-color）

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

background-color: 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 坐标，可以使用方位名词或者精确单位。

参数值	说明
length	百分数 | 由浮点数字和单位标识符组成的长度值
position	top | center | bottom | left | right 方位名词

如果参数是方位名词：

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

比如，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的后面

 补充：背景颜色渐变

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

           渐变更像一种图片，通过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）设置圆心的大小 宽度 高度