Question

我正在尝试创建一个简单的搜索栏，类似于亚马逊的搜索栏，其背景图像覆盖了整个网页。不知何故我的代码未显示该图像。知道为什么吗？我试图从目录中的相对路径插入图像，但仍然无法正常工作。它与引导程序的使用有关吗？我删除了引导引用，但仍然出现相同的问题。

body {
  /* The image used */
  background-image: url("background_search.jpg");
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
}

select {
  background: transparent;
  border: none;
  padding: 6px 12px;
}

button {
  padding: 6px 12px;
  background: transparent;
  border: none;
}

.input-group-addon {
  padding: 0!important;
}

.row {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.allElements {
  position: absolute;
  top: 50%;
  height: 10em;
  margin-top: 15em;
}

<html>

<head>
  <link href="https://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet" />
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

  <link href="css/mainCSS.css" rel="stylesheet" />
</head>

<body>
  <div class="row">
    <div class="allElements">
      <h1>NotaryPedia</h1>
      <div class="col-md-2"></div>
      <div class="col-md-8">
        <div class="input-group">
          <span class="input-group-addon">
			  <select>
				<option>All</option>
				<option>Author</option>
				<option>Date</option>
				<option>Person</option>
				<option>Place</option>
				<option>Reference</option>
				<option>Subject</option>
			  </select>
		  </span>

          <input id="search" type="text" class="form-control" name="search" placeholder="Enter search..." />

          <span class="input-group-addon"> <button>Submit</button></span>
        </div>
      </div>
      <div class="col-md-2"></div>
    </div>
  </div>
</body>

</html>

Answer 1

您错过了背景尺寸：封面；填充图像。另外，您需要将图片放置在可到达的位置（相对路径中的或通过http 公开的位置）

body {
  /* The image used */
  background-image: url("background_search.jpg");
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Answer 2

在您的CSS中尝试

body {
background: url('background_search.jpg') no-repeat 50% 50% fixed;
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;}

Answer 3

通过给出整个相对路径来解决它

在搜索页面中插入背景图片

3 个答案: