css --- background 四（多重背景、混合写法）

碎碎念：知识点梳理归纳，如果有什么不对的感谢大家指正一起学习！

1. 多重背景图，用逗号区别各个图片

 background: url(https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3041487934,2735112150&fm=26&gp=0.jpg),  
             url(https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=383729164,3114814932&fm=26&gp=0.jpg);
             
/* 设置图片位置信息不然会重叠在一起 */
background-size: contain,100px 100px;
background-repeat: no-repeat; 
background-position: 0 0,100px 200px;             

1.1 多重背景，设置不同的参数

1.1.1 background-repeat

/*  第一张图片不重复，第二张图片x轴重复 */

background-repeat: no-repeat,repeat-x; 

1.1.2 background-size

/*  第一张图片大小，第二张图片大小 */
background-size: 100% 50% , 50px 50px; 

2. 混合写法

• background是复合属性值组合，属性后面可以使用多个值，值与值之间用空格间隔

背景语法：

background: background-color || background-image || background-repeat || background-attachment || background-position / background-size|| background-origin background-clip;

---

2.1 简写

.box{
	width: 200px;
	height: 200px;
	background:greenyellow url(香瓜.jpg) no-repeat scroll center center;
	background-size: 100px 100px;
    }

2.1 斜杠语法

emm…暂时有点稀里糊涂

• 将background-size、origin、clip的值也简写进去，中间用 / 隔开

.box{
     width: 200px;
     height: 200px;
     padding: 10px;
     background:greenyellow url(香瓜.jpg) no-repeat scroll center center / 			  100px 100px content-box content-box;;
    }

3. 范例

3.1 图片、线性渐变重叠的背景

.img {
       width: 200px;
        height: 200px;
        background: url(香瓜.jpg),
        linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
        background-repeat: no-repeat, no-repeat;
        background-size: 100px 100px, 100% 100%;
        background-position: left, right bottom;
      }

---

相关链接：
本文参考了很多资料，有些链接忘记保存，有问题请及时联系。
属性简写