Question

代码：由点击时带有提交按钮的datalist组成一些javascript

我想在背景图像上方显示datalist和按钮（注意：我将bgimage设为响应）但它没有显示在图像上方。

P.S我的意思是通过透明的datalist和按钮，想要的只是我的html元素背后的bg图像。请帮忙......

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
    width: 100%;
    height: auto;
}
</style>
</head>
<body>

<img src="bgimage.jpg" width="460" height="345">

<div class="container">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
<div class="text-center align-middle">
<input list="category" name="category" id="textcat" placeholder="Enter your area.." style="width: 300px !important">
<datalist id="category">
  <option id="www.google.com" value="fruits" />
  <option id="www.fb.com" value="animals" />
  <option id="www.ymail.com" value="vechiles" />
  <option id="www.msn.com" value="ornaments" />
</datalist>
<input id="btn" type="button" value="submit">
</div>
</div>
</div>

<style>
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
}

#category {
  width: 500px !important;
}
</style>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
  $('#btn').click(function() { // The `$` reference here is a jQuery syntax. So we are loading jquery right before this script tag
    var textval = $('#textcat').val();
    window.location = "1stlink.php?variable=" + encodeURIComponent(textval);
  });
</script>


</body>
</html>

Answer 1

使用背景图片样式元素

会好得多

<style>
    body {
        position:relative;
    }
    .background {
        position:absolute;
        top:0; bottom:0; left:0; right:0;
        background-size:cover;
        background-position:center;
        background-image:url(bgimage.jpg);
        z-index:-1; // Sets the div's layer level below everything else
    }
</style>

<div class="background"></div>

z-index是定义页面图层的内容。所有内容的默认值为0，因此将内容设置为-1会使其低于其他每个元素。同样，您可以将.container设置为z-index 2。

我还发现将背景作为自己的元素是更好的做法，这样他们就不会通过拥有自己的z-index来干扰可点击元素，也可以拥有自己的:after类以及:hover / :active个州。

Answer 2

您可以将图片添加为容器的背景图片，而不是img标记：

.container {
    background-image: url("bgimage.jpg");
    height: 345px;
    width: 460px;
}

然后您不需要img标记，背景图像位于元素后面。

演示：jsfiddle

你还有4个开场div，但只有3个结束。

Answer 3

尝试使用这种方法。

https://jsfiddle.net/pablodarde/fd2cmjqf/

这里的技巧是创建一个带有背景css的容器，然后使用“background-cover”css属性。

<强> HTML

    <div class="container">
  <div class="row">
      <div class="col-md-6 col-md-offset-3">
  <div class="text-center align-middle">
  <input list="category" name="category" id="textcat" placeholder="Enter your area.." style="width: 300px !important">
  <datalist id="category">
    <option id="www.google.com" value="fruits" />
    <option id="www.fb.com" value="animals" />
    <option id="www.ymail.com" value="vechiles" />
    <option id="www.msn.com" value="ornaments" />
  </datalist>
  <input id="btn" type="button" value="submit">
  </div>
  </div>
</div>

<强> CSS

    html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.img-box {
  /*position: relative;
  width: 100%;
  height: 0;*/
}

img {
    position: absolute;
    width: 100%;
    height: auto;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/a/ae/Castle_Neuschwanstein.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

#category {
  width: 500px !important;
}

Answer 4

您可以在容器div中使用background-image属性。

您的CSS：

 <style>
    .container {
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 flex-direction: column;
                 height: 100vh;
               }
    #category {
      width: 500px !important;
    }

已更改css：

<style>
    .container {
                  background-image: url("bgimage.jpg");
                  height: 345px;
                  width: 460px;
               }

     #category {
                 width: 500px !important;
               }

    </style>

html元素不在背景图像上

4 个答案: