u-view实现背景图片上面显示文字

最新推荐文章于 2023-09-07 11:06:09 发布

hailanBlue

最新推荐文章于 2023-09-07 11:06:09 发布

阅读量1.8k

点赞数 2

分类专栏： uni-app

本文链接：https://blog.csdn.net/jxjianghailan/article/details/108602382

版权

通过设置z-index属性为-1，可以将背景图片置于底层，从而实现文字覆盖在图片上方的布局效果。文章详细介绍了如何将最外层的view居中，以达到文字在图片上的居中展示。

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

实现如图功能：

背景是张图片，文字在上面显示。

.app_content_top {
		z-index: -1;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 500rpx;
	}

z-index=-1将图片放到最后面，文字就可以显示到图片上面。

将文字的最外层view居中

.app_content_medium {
		padding-top: 160rpx;
		text-align: center;
	}

	.app_content_medium_1 {
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
		line-height: 44rpx;
	}

	.app_content_medium_2 {
		font-size: 60rpx;
		color: #157EFB;
		line-height: 44rpx;
		padding-top: 13rpx;
	}

	.app_content_medium_3 {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 150rpx;
	}

	.app_content_medium_left {
		width: 50%;
		border-right: 1px solid #EEEEEE;
	}