在 angularJS 中的图像 HTML、CSS 上重叠文本区域或文本答案

【问题标题】：Overlapping the textarea or text over the image HTML, CSS in angularJS在 angularJS 中的图像 HTML、CSS 上重叠文本区域或文本
【发布时间】：2021-02-22 11:48:49
【问题描述】：

我正在为这项研究创建一个网站。

虽然我正在创建文本区域和一些表单作品，

我不知道如何重叠图像和文本。

这是我想在下面做的一个例子 This is example of the screenshot

如何像上传的图片一样在图片上重叠textarea或text？？

谢谢！

<div class = "container">
   <img src = '/assets/img/Iphone.png' alt="Snow" width = "300" height = "530" style = "margin-top: -1300px; margin-left:-200px">
   <div class="centered" style = "margin-top: -800px; margin-left: -10px; padding: 10px;" src = '/assets/img/Iphone.png'>hello</div>
</div>

Here's second example

我想为“你好”做一个背景色作为第二个例子。

【问题讨论】：

标签： javascript html css angularjs overlapping

【解决方案1】：

将元素定位在父元素的右下角

.wrapper {
  position: relative;
  width: 100%;
  height: 200px;
}

.wrapper textarea {
  width: 100%;
  height: 100%;
}

.wrapper .counter {
  position: absolute;
  bottom: 0;
  right: 0;
}

<div class="wrapper">
  <textarea></textarea>
  <div class="counter">Foo</div>
</div>

【讨论】：

不知道你在说什么图片
我编辑了我正在做的事情。如果您检查我上传的第二个示例，则图像上带有蓝色背景的文本。有没有办法在图片上添加背景颜色？
我尝试了 style = "background-color: blue"，但没有成功:(
所以使用背景图片并按照你想要的方式将元素放在它上面。