css多重背景

• background-size（背景尺寸）
• background-origin（定义背景图像的位置）
• background-clip（背景的绘制区域）

多重背景

• CSS 允许您通过 background-image 属性为一个元素添加多幅背景图像
• 不同的背景图像用逗号隔开，并且图像会彼此堆叠，其中的第一幅图像最靠近观看者

实例：

#example1 {
  background-image: url(flower.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

多重背景图像可以使用单独的背景属性（如上所述）或 background 简写属性来指定
下面的例子使用 background 简写属性（结果与上例相同）：

实例

#example1 {
  background: url(flower.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

background-size属性(背景尺寸)

CSS background-size 属性允许您指定背景图像的大小。

可以通过长度、百分比或使用以下两个关键字之一来指定背景图像的大小：contain 或 cover。
实例：

#div1 {
  background: url(img_flower.jpg);
  background-size: 100px 80px;
  background-repeat: no-repeat;
}

contain关键字

contain关键字将背景图像缩放为尽可能大的尺寸（但其宽度和高度都必须适合内容区域）。这样，取决于背景图像和背景定位区域的比例，可能存在一些未被背景图像覆盖的背景区域。

cover关键字

cover 关键字会缩放背景图像，以使内容区域完全被背景图像覆盖（其宽度和高度均等于或超过内容区域）。这样，背景图像的某些部分可能在背景定位区域中不可见。

定义多个背景图的尺寸

在处理多重背景时，background-size 属性还可以接受多个设置背景尺寸的值（使用逗号分隔的列表）

实例：

#example1 {
  background: url(tree.png) left top no-repeat, url(flower.gif) right bottom no-repeat, 
  	url(paper.gif) left top repeat;
  background-size: 50px, 130px, auto;
}

background-origin 属性（背景位置）

• border-box - 背景图片从边框的左上角开始
• padding-box -背景图像从内边距边缘的左上角开始（默认）
• content-box - 背景图片从内容的左上角开始

background-clip 属性（指定背景的绘制区域）

• border-box - 背景绘制到边框的外部边缘（默认）
• padding-box - 背景绘制到内边距的外边缘
• content-box - 在内容框中绘制背景
• text - 背景只在在文字的范围内
  background-clip:text;
  -webkit-background-clip: text;

参考地址

https://www.w3school.com.cn/css/css3_backgrounds.asp