如何在没有绝对定位的情况下将文本放在图像上或将图像设置为背景

在没有绝对定位的情况下将文本放在图像上或将图像设置为背景，可以使用CSS和HTML来实现。以下是一个简单的示例：

HTML代码：

<!DOCTYPE html>
<html>
<head><title>图像背景和文本示例</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="image-background">
		<p class="text-on-image">这是一个文本示例</p>
	</div>
</body>
</html>

CSS代码：

.image-background {
	background-image: url('your-image-url.jpg');
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.text-on-image {
	color: white;
	font-size: 24px;
	font-weight: bold;
	text-shadow: 1px 1px 1px black;
}

在这个示例中，我们使用了一个名为.image-background的div元素作为图像的容器。我们将背景图像设置为your-image-url.jpg，并使用background-size: cover;和background-position: center;来确保图像始终填充整个容器。

然后，我们使用了一个名为.text-on-image的p元素来放置文本。我们将文本颜色设置为白色，字体大小设置为24px，字体加粗，并添加了一个黑色的文本阴影以提高可读性。

最后，我们使用了display: flex;、align-items: center;和justify-content: center;来将文本居中在图像上。

这个示例可以根据需要进行修改和扩展，以适应不同的需求和场景。