代码之家 › 专栏 › 技术社区 › Hanz Cheah

在带有引导和CSS的背景图像上定位搜索栏和按钮

responsive bootstrap-4 twitter-bootstrap css html

Hanz Cheah · 技术社区 · 6 年前

我正试图将搜索栏放置在背景图像上。我还试图在图像的底部和中心放置一个按钮。然后,我会有容器。

我要达到的目标。

但我被定位困住了。字形图标也不起作用?

我的代码

<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>

要解决的问题:

获取背景图片上的搜索栏
设置背景图片总是在屏幕的顶部,全宽但一定高度。我目前硬编码高度为200像素。有没有一种方法可以让它做出反应?
我也被glyphycon问题困住了,为什么不显示?
如何在图像底部和中锋?

3 回复 | 直到 6 年前

robinvrd 6 年前

使用带负数的页边距顶部使窗体显示在图像上。
符号图标在这里看起来工作得很好。

* {
  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/>

VSM 6 年前

    .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>

试试这个密码…如果你需要帮助,告诉我。

AKASH PANDEY 6 年前

好的,你想把搜索栏放在一个图像里面。

以图像为背景制作div

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

然后搜索栏的css

   position: absolute;

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