选择带有背景图像的框？答案

【问题标题】：Select box with background image?选择带有背景图像的框？
【发布时间】：2020-11-12 11:50:50
【问题描述】：

我想将选择框放在背景图片上。我该怎么做？

这样，我可以为用户提供更好的体验。

<select id='selectbox'>
        <option>30</option>
        <option>40</option>
        <option>50</option>
</select>

【问题讨论】：

到目前为止您尝试了什么，什么不起作用？你的 CSS 在哪里？只需将图像包装在 div 中，或使用带有该图像的 div 作为背景，然后使用选择框作为 div 的子级。
没有与此表单关联的 css img。反正我也不知道怎么弄

标签： javascript html css vue.js canvas

【解决方案1】：

只需使用 div 和图像作为背景图像。并插入具有绝对定位的选择框。然而，这对于完全响应性来说将是一团糟，因此没有图像的完整 CSS + HTML 方法会更好。但是，为此，您至少需要某种编码技能。

.select {
  background-image: url(https://i.hizliresim.com/2XxBuE.png);
  width: 419px;
  height: 160px;
  position: relative;
}

#selectbox_a {
  position: absolute;
  left: 160px;
  top: 115px;
}

#selectbox_i {
  position: absolute;
  left: 260px;
  top: 115px;
}

<div class="select">
  <select id='selectbox_a'>
    <option>30</option>
    <option>40</option>
    <option>50</option>
  </select>
  <select id='selectbox_i'>
    <option>30</option>
    <option>40</option>
    <option>50</option>
  </select>
</div>

【讨论】：

【解决方案2】：

您可以在具有背景图像的 div 中定义您的标签，并将您的选择放置在任何地方。

.bg {
  background: url(https://i.hizliresim.com/2XxBuE.png) no-repeat;
  width: 100vw;
  height: 100vh;
  position: relative;
}
     
#selectbox {
  position:absolute;
  left: 50%;
  top:50%;
}

<div class="bg">
  <select id="selectbox">
    <option>30</option>
    <option>40</option>
    <option>50</option>
  </select> 
</div>

【讨论】：

您好，欢迎来到 Stackoverflow。请花一些时间阅读 SO 指南。下次回答问题时，请使用可解析的代码 sn-p 来展示您的解决方案，并花时间解释您的解决方案，以便所有人都能理解和复制。