使用引导程序和 CSS 在背景图像上定位搜索栏和按钮答案

【问题标题】：Position search bar and button on an background image with bootstrap and CSS使用引导程序和 CSS 在背景图像上定位搜索栏和按钮
【发布时间】：2019-01-11 02:17:19
【问题描述】：

我正在尝试将搜索栏定位在背景图片上。我也试图在图像的底部和中心放置一个按钮。之后，我将拥有容器。

我正在努力实现的目标。

但是我对定位感到困惑和困惑。字形图标也不能正常工作？

我的代码

<style>
  .card {
    border: 0px solid;
  }
  
  .drop-shadow {
    -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, .5);
    box-shadow: 0 0 10px 1px rgb(211, 211, 211, 0.8);
    border-radius: 0px;
  }
  
  .container-fluid {
    width: auto
  }
  
  .container-fluid.drop-shadow {
    margin-top: 2%;
    margin-left: 5%;
    margin-right: 5%
  }
  
  .img-fluid {
    height: 200px;
  }
  
  #child {
    width: 100%;
    height: 20px;
    margin: auto;
    text-align: center;
    bottom: 0px;
    position: absolute;
  }
  
  .btn-checkin {
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    color: #fff;
    border-color: #EC008c;
    text-transform: uppercase;
    background-color: #EC008c;
    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
    padding: 0.375rem .75rem;
    font-size: 13px;
    border-radius: .25rem;
  }
</style>

</head>

<body id="page-top">

  <div class="card">

    <img class="img-fluid" src="img/1847p.png" alt="Card image cap">

    <div class="col-md-5">
      <div class="form-group">
        <div class="icon-addon addon-lg">
          <input type="text" placeholder="Search Class" class="form-control" style="height:30px;position:absolute" id="email">
          <label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label>
        </div>
      </div>
    </div>

    <div id="child">

      <button class="btn-checkin">Check in</button>

      <div class="container-fluid drop-shadow">
        <div class="row">
          frsjafksdalkdfsa
        </div>
        fsdfdasasd
      </div>

    </div>
  </div>

目标问题：

获取背景图片上的搜索栏
将背景图片设置为始终位于屏幕顶部，全宽但具有一定高度。我目前将高度硬编码为 200px。有没有办法让它响应？
我也遇到了glyphycon问题，为什么不显示？
如何将按钮放置在图像底部和中心？

【问题讨论】：

你能用你的图像和字形导入来制作你的代码，这样我就可以轻松测试并给你答案。
jsfiddle.net/hansheung/2re95qf3/4
在下面试试我的答案
回复了，你现在得到了你需要的一切，我的代码真的很容易理解，如果需要可以问我。
@rvz，我在 iPad 上显示页面时遇到问题，因为我将高度设置为静态 200 像素。图片不知何故被调整大小并被剪掉。有什么方法可以让高度动态化？

标签： html css twitter-bootstrap bootstrap-4 responsive

【解决方案1】：

好的，所以您想将搜索栏定位在图像中。

制作一个以图片为背景的div

   background: image_source;
   background-size: contain;
   position: relative; //must to write
   width: 100%;
   height: 100px; //as much as you want

然后是搜索栏的css

   position: absolute;

然后使用顶部、左侧等来定位搜索栏

【讨论】：

【解决方案2】：

    .card{
            border:0px solid;
            position:relative;
            height:200px;
            background:url('https://preview.ibb.co/fex0wK/1847p.png') no-repeat top center;
            background-size:cover;
        }
        
        .card img {
          width:100%;
        }
        
        .search-box {
          position : absolute;
          display:inline-block;
          bottom:-30px;
          left:0;
          right:0;
          padding:15px;
          text-align:center;
        }
    
        .drop-shadow {
            -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, .5);
            box-shadow: 0 0 10px 1px rgb(211, 211, 211, 0.8);
            border-radius:0px;
        }
        .container-fluid{
            width:auto
        }
        .container-fluid.drop-shadow {
            margin-top:2%;
            margin-left:5%;
            margin-right:5%
    
        }
    
        .img-fluid {
            height: 200px;
        }
    
        #child{
                width:100%;
                height: 20px;
                margin: auto;
                text-align: center;
                margin-top: 40px;
        }
        .form-group {
          width:100%;
          margin-bottom:10px;
        }
        .btn-checkin{
            display: inline-block;
            text-align: center;
            white-space: nowrap;
            color: #fff;
            border-color: #EC008c;
            text-transform: uppercase;
            background-color: #EC008c;
            font-family:'Open Sans','Helvetica Neue',Arial,sans-serif;
            padding: 0.375rem .75rem;
            font-size: 13px;
            border-radius: .25rem;
    }
    
    .icon-addon {
      position:relative;
    }
    .icon-addon label {
        position: absolute;
        left: 2px;
        top: 2px;
        padding: 8px;
        font-size: 20px;
    }
    .icon-addon input {
        height:40px;
        padding-left:35px;
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    
    <body id="page-top">
    
    <div class="card" >
        <!-- <img class="img-fluid" src="img/1847p.png" alt="Card image cap"> -->
        <div class="search-box">
            <div class="form-group">
                <div class="icon-addon addon-lg">
                    <input type="text" placeholder="Search Class" class="form-control" id="email">
                    <label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label>
                </div>
            </div>
            <button class="btn-checkin">Check in</button>
        </div>
    </div>
    <div id="child">
      <div class="container-fluid drop-shadow">
        <div class="row">
          frsjafksdalkdfsa
        </div>
        fsdfdasasd
      </div>
    </div>

试试这个代码...如果您需要任何帮助，请告诉我。

【讨论】：

您的代码可以工作，但是当我点击 iPad 作为显示时。由于硬编码的高度 200px，图片有点被切断了？无论如何要纠正这个问题？
@Hanz Cheah，当屏幕宽度为768px（ipad）时，您需要增加固定高度。这是由于 background:cover;横幅的样式。它会自动覆盖横幅区域，您设置了固定高度。
如果我设置一个固定的高度覆盖iPad，像iPhone X、S5这样的显示器其余部分的纵向模式会非常高。如果检测到 iPad，有没有办法改变高度？
@media screen and (max-width: 768px) and (min-width: 767px) { .card{ height:335px; } } 试试这个..这行得通
我按照@robinvrd 的回答，它是动态工作的。感谢您的帮助，我深表感谢。

【解决方案3】：

使用带负值的 margin-top 使表单在图像上。
Glyphicons 在这里看起来效果很好。

* {
  box-sizing: border-box;
}

img {
  width: 100%;
}

div#form-box {
  margin-top: -95px;
  
  text-align: center;
}

div#input-group {
  width: 80%;
  
  margin: 0 auto 20px;
  
  position: relative;

  background-color: #fff;
  
  border: none;
  border-radius: 5px;
}


input#email, label[for="email"] {
  display:inline-block;
  vertical-align: middle;
}

input#email {
  width: calc(100% - 40px);
  
  padding: 10px;
  
  border: none;
}

label[for="email"] {
  width: 40px;
  
  line-height: 40px;
}

button#btn-checkin {
  display: inline-block;
  
  padding: 6px 10px;
  
  border: none;
  border-radius: 5px;
  background-color: #EC008c;
  color: #fff;
  
  text-align: center;
  text-transform: uppercase;
}

<head>
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" />
</head>

<img src="http://wonderfulengineering.com/wp-content/uploads/2016/01/Desktop-Wallpaper-4.jpg" />

<div id="form-box">
  <form>
    <div id="input-group">
    <label for="email" class="glyphicon glyphicon-search"></label><!--
      --><input type="text" placeholder="Search Class" id="email">
    </div>
    <br/>
    <button id="btn-checkin">Check-in</button>
  </form>
</div>

<br/>
<br/>
<br/>

【讨论】：