Question

我有下面的代码

    <img src="../../1021.png" alt class="img img-fluid">
  </div>

由于某些原因，我想在此图像上写一些文本和输入字段而不将其作为背景，这仍然可以吗？

Answer 1

您可以对文本使用绝对位置。本质上是这样的：

<div class="wrapper">
  <img src="../../1021.png" alt class="img img-fluid">
  <div class="text">Here is your text</div>
</div>

和CSS：

.wrapper {
  position: relative;
  width: 100%;
}

.wrapper img {
  position: relative;
  z-index: 0;
}

.wrapper .text {
  position: absolute;
  z-index: 10;
  bottom: 0;
}

根据您的需要进行调整。原则是您的文本和图像元素都包含在包装器中，包装器必须位于相对位置，以便您可以相对于包装器更改绝对定位的文本。另外还要注意z索引，以确保文本位于图像顶部。

Answer 2

我只是创建一个基本的文本重叠代码。希望对您有帮助。谢谢

.parent-class {
	position: relative;
}

.content-class {
	background-color: #fff;
	position: absolute;
	top: 20px;
	left: 20px;
	padding: 10px;
}

.content-class h1,
.content-class p {
  margin: 0;
}

<div class="parent-class">
	<div class="content-class">
		<h1>Hello World!</h1>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
	</div>
	<img src="https://images.pexels.com/photos/1020315/pexels-photo-1020315.jpeg" alt class="img img-fluid">
</div>

将文本放在html中的图像上，而无需将图像作为背景

2 个答案: