css中背景色、背景图的使用

1、同时使用背景色、背景图片

参考链接：链接

以下样式，背景色在图片下方(缺点：图片不透明时，背景色会被完全遮挡。)

.header {height: 100%;width: 100%;background-color: #000;background-image: url('/static/images/back.png') ;background-repeat: no-repeat;background-size: 100% 100%;
}

2、两张图片叠加

参考链接：链接

<view class="header"><view class="header-box"></view>
</view>

.header {height: 100%;width: 100%;background-image: url('/static/images/back.png') ;background-repeat: no-repeat;background-size: 100% 100%;position: relative;.header-box{position: absolute;top: 0;bottom: 0;left:0;right:0;background: url('/static/images/back1.png') ;background-repeat: no-repeat;background-size: 100% 100%;mix-blend-mode: overlay;}
}

底图： 

遮罩图 ：

合成图： 

3、多张图片平铺

参考链接：链接

原图：

横向平铺：

.header {height: 80vh;width: 100%;background: url('/static/images/index_after.png') center left no-repeat,url('/static/images/index_after.png') center right no-repeat,url('/static/images/index.png') center left repeat-x;
}

纵向平铺：

.header {height: 80vh;width: 100%;background: url('/static/images/index_after.png') center top no-repeat,url('/static/images/index_after.png') center bottom no-repeat,url('/static/images/index.png') center top repeat-y;
}