如何在覆盖全屏的背景图片上创建一列小工具？

<div class="fullscreen-container">
  <img src="背景图片地址" alt="背景图片">
  <div class="widget-column">
    <!-- 小工具内容 -->
  </div>
</div>

.fullscreen-container {
  position: relative;
  width: 100%;
  height: 100vh;
}

.fullscreen-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.widget-column {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px; /* 调整小工具列的宽度 */
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8); /* 设置小工具列的背景颜色和透明度 */
}

<div class="widget-column">
  <div class="widget">
    <!-- 小工具1的内容 -->
  </div>
  <div class="widget">
    <!-- 小工具2的内容 -->
  </div>
  <!-- 添加更多小工具 -->
</div>

.widget {
  margin: 10px;
  padding: 10px;
  background-color: #fff;
}