你可能不知道的 css background

设置多个背景图片

场景： 现代移动端网页设计按照 iphoneX（750*1624）的尺寸进行设计的。但市面上的安卓全面屏手机逻辑像素确是千奇百怪的。
冲突： 750*1624 的背景图无法铺满一些全面屏的安卓手机屏幕。
需要解决的问题： 我们要保证用户体验，需要让背景图铺满屏幕。

这里给出两种解决方案：

1. 设计一个尽可能长的尺寸，短屏手机背景截取
2. 设计的时候，背景底部尽量设计成可以重复的 OR 可以拉伸的

这里第二种方案就涉及到本节主题：设置多个背景图片。

.page {
	width: 100%;
	height: 100%;
    /* bg-index-top实际高度1054rpx */
    /*bg-index-top.png从左上角自动铺开不重复*/
    /*bg-index-bottom.png从bg-index-top结束的位置（即bg-index-top实际高度处）进行拉伸至铺满整个屏幕*/
	background: url('https://xxx.com/bg-index-top.png?v1') 0 0/100% auto no-repeat, 
                url('https://xxx.com/bg-index-bottom.png') 0 1054rpx/100% 100% no-repeat;
    /*bg-index-top.png从左上角自动铺开不重复*/
    /*bg-index-bottom.png从bg-index-top结束的位置（即bg-index-top实际高度处）进行竖向重复至铺满整个屏幕*/
    background: url('https://xxx.com/bg-index-top.png?v1') 0 0/100% auto no-repeat, 
    url('https://xxx.com/bg-index-bottom.png') 0 1054rpx/100% auto repeat-y;
}

设置多张背景图时，如何设置背景图展示的优先级？

场景： 我们希望截取bg-index-top的一部分（从顶部开始），让bg-index-bottom覆盖掉bg-index-top底部的一部分。 冲突： 按照上面的css代码，会发现bg-index-top优先显示了，明显不满足需求。
需要解决的问题： 让bg-index-bottom浮在bg-index-top上面。
解决方案：

.page {
	width: 100%;
	height: 100%;
    /*bg-index-bottom.png从0 1000rpx的位置进行拉伸至铺满整个屏幕*/
    /*bg-index-top.png从左上角自动铺开不重复*/
	background: url('https://xxx.com/bg-index-bottom.png') 0 1000rpx/100% 100% no-repeat
                url('https://xxx.com/bg-index-top.png?v1') 0 0/100% auto no-repeat;
}

可以看出，css设置多个背景图时，背景图的优先级（越靠前，优先级越高）。