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

原文地址：https://blog.csdn.net/fanxingxue/article/details/142650950

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！