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