少/ CSS：在图像上写静态文本

Question

我有以下图片，

如何在上面的图像上写文字并达到以下目的？

Answer 1

尝试一下，希望对您有所帮助。谢谢

.wrapper {
  position: relative;
}

.wrapper img {
  width: 100%;
}

.wrapper label {
  color: #fff;
  font-size: 24px;
  position: absolute;
}

.wrapper #id1 {
  left: 20px;
  top: 20px;
}

.wrapper #id2 {
  right: 20px;
  top: 20px;
}

.wrapper #id3 {
  left: 20px;
  bottom: 20px;
}

.wrapper #id4 {
  right: 20px;
  bottom: 20px;
}

.wrapper #id5 {
  right: 20px;
  top: 50%;
  transform: rotate(90deg)
}

.wrapper #id6 {
  left: 20px;
  top: 50%;
  transform: rotate(-90deg)
}

<div class="wrapper">
  <label id="id1">Text Left!</label>
  <label id="id2">Text Right!</label>
  <label id="id3">Text Bottom Left!</label>
  <label id="id4">Text Bottom Right!</label>
  <label id="id5">Text Rotate Right!</label>
  <label id="id6">Text Rotate Left!</label>
  <img src="https://keyassets.timeincuk.net/inspirewp/live/wp-content/uploads/sites/12/2015/07/Depth-of-field-landscape.jpg" alt="" />
</div>

Answer 2

假设您有类似HTML的内容：

<div class="container">
  <img />
  <p>Foo</p>
</div>

类似的东西会起作用（您必须明显弄乱值）：

.container {
  position: relative; 

  img{ z-index: 1; // img styles here }
  p { position: absolute; left: 0.5rem; top: 0.5rem; z-index: 3; transform: rotate(90deg) }

}

分步操作：

• 完全定位文本
• 将其旋转90度
• 将Z索引设置为高于图片
• 将文本正确定位在图像上
• 利润...