我如何在图像中将图像上的文本框或按钮等内容作为背景？

Question

正如您在此处所见，“上传文件”和“选择文件”按钮位于图像上方，我无法在图像上移动它们。

<form  class="w3-container " action="add_file.php" method="post" enctype="multipart/form-data" style="position:absolute;z-index:20%;margin-left:50%;">
                <input type="file" name="uploaded_file"><br>
                <input type="submit" value="Upload file">
            </form>
            <p>
               &nbsp;&nbsp;&nbsp; <a href="list_files.php">See all files</a>
            </p>

<div>   
<img src="switzerland_alps_mountains_night_beautiful_landscape_99817_1920x1080.jpg">
</div>

Answer 1

此？

body {
  margin: 0
}

.content {
  position: relative;
  margin: 10px;
  box-sizing: border-box;
}

img {
  position: aboslute;
  width: 100%;
}

button {
  position: absolute;
  top: 0;
  left: 0;
}

button:nth-of-type(2) {
  margin-left: 50px;
}

<div class="content">
  <img src="https://www.w3schools.com/css/trolltunga.jpg">
  <button>hi</button>
  <button>hello</button>
</div>