css-图片和文字小模块

发布时间 2023-10-14 17:03:22作者: Yancy00
<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<script src="less.min.js"></script>
		<style>
			.title-box {
				width: 400rpx;
				height: 40rpx;
				margin: 0 auto;
				position: relative;
			}

			.title-bg {
				width: 100%;
				height: 100%;
			}

			.title-text {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				font-size: 22px;
				font-weight: bold;
				color: #666;
			}
		</style>
	</head>
	<body>
		<div class="title-box">
			<img class="title-bg" src="./title1.png" alt="">
			<div class="title-text">积分兑换</div>
		</div>
	</body>
</html>

image