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;
}