uniapp自定义背景层

最新推荐文章于 2024-06-20 13:41:59 发布

小清柑

最新推荐文章于 2024-06-20 13:41:59 发布

阅读量318

点赞数

分类专栏： uni-app

本文链接：https://blog.csdn.net/weixin_48940933/article/details/119426958

版权

uni-app 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

当uniapp的page.json中设置的backgroundColor不生效时，可以通过在模板中添加一个固定定位的背景层来手动设置背景色。通过创建一个class为'background-layer'的view，并设置其样式为全屏覆盖并指定背景颜色，可以确保背景色正常显示。同时，确保该背景层的z-index小于页面内容的z-index，以确保内容在背景之上。

摘要由CSDN通过智能技术生成

有时uniapp 里在page.json里配置backgroundColor - 窗口背景色不生效，
这时我们可以手动的添加一个层，自定义一个背景，如下

<template>
	<view class="dbrw">
		// 背景层
		<view class="background-layer"></view>
		<view class="course">
			// 这个标签里开始构建页面
			...
		</view>
	</view>
</template>

<style>
	.background-layer{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #F5F5F5;
		z-index: 0;
	}
	.course{
		position: relative;
		z-index: 1;
	}
</style>