CSS背景图片，文字设置背景

CSS背景

叠加背景图片：

background-image 可以为一个元素添加多个背景，第一幅图片最靠近观看者

#div {
	background-image : url(a.gif), url(b.gif), url(c.gif);    
}

多层叠加的背景还可以使用单独的背景属性，如下

#div {
	background: url(cat.jpeg) top center no-repeat, url(back.webp) 100% 100%;
}

背景图片尺寸：

1. background-size : width height;

   px, %, 或者关键字

   contain(按图片尺寸小的边展开，可能有部分区域不会被覆盖)，

   cover（按图片尺寸大的部分展开，可能有部分图片展示不出来）

   //全尺寸背景，匹配窗口缩放
   background: url(a.jpg) no-repeat center fixed; 
   background-size: cover;
   

2. background-repeat : repeat;复制 no-repeat; 不复制

3. background-origin：指定图像位置

   div { /*接受三个值*/
       background-origin : border-box; /*图片从边框左上角开始*/
       background-origin : padding-box;/*默认：图片从内边缘左上角开始*/
       background-origin : content-box;/*从内容左上角开始*/
   }
   

4. background-clip：指定背景绘制区域

   div { /*接受三个值*/
       background-clip : border-box; /*默认：背景绘制到外部边缘*/
       background-clip : padding-box;/*背景绘制到内边距边缘*/
       background-clip : content-box;/*在内容框中绘制背景*/
   }
   

   文字设置背景：

   div {
    	background-image: url("back.webp");
   	background-clip : text;
       -webkit-background-clip : text;
       -webkit-text-fill-color : transparent;
   }