css设置文字在图片上面显示（使用Position及引入背景图片(background-image: url(path))）

要使文字在图片上显示，可以使用CSS的定位属性。以下是一个简单的例子，演示如何使用position属性将文字放在图片上方：

HTML:

<div class="container">
  <img src="path/to/your/image.jpg" alt="Background Image">
  <div class="text">This is some text over the image.</div>
</div>

CSS:

.container {
  position: relative;
  display: inline-block; /* 或者其他适合的布局方式 */
}
 
.container img {
  width: 100%; /* 或者其他适合的宽度 */
  height: auto; /* 保持图片的宽高比 */
}
 
.container .text {
  position: absolute;
  top: 0;
  left: 0;
  color: white; /* 或者其他合适的颜色以确保文本可读性 */
}

在这个例子中，.container 是一个相对定位的容器，其中的图片和文字都是绝对定位的，这意味着它们会相对于 .container 进行定位。.text 类中的文本会被放置在图片的上方，并且由于它是绝对定位的，所以它会显示在图片之上。

如果你想使用背景图片而不是<img>标签，可以这样做：

HTML:

<div class="background-text">This is some text over the background image.</div>

CSS:

.background-text {
  background-image: url('path/to/your/image.jpg');
  background-size: cover; /* 或者其他适合的大小设置 */
  background-repeat: no-repeat;
  color: white; /* 文字颜色 */
  padding: 50px; /* 文字与背景图片的距离 */
  display: inline-block; /* 或者其他适合的布局方式 */
}

在这个例子中，.background-text 类使用背景图片而不是<img>标签，并且文本内容被放置在该元素内，通过padding属性与背景图片有一定的间隔。