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;
}
相关推荐
科技探秘人11 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人11 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR17 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香19 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969321 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai27 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_91536 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫6 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试