使用引导程序和 CSS 在背景图像上定位搜索栏和按钮
Posted
技术标签:
【中文标题】使用引导程序和 CSS 在背景图像上定位搜索栏和按钮【英文标题】：Position search bar and button on an background image with bootstrap and 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" >
<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 像素。图片不知何故被调整大小并被剪掉。有什么方法可以让高度动态化？ 【参考方案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" > -->
<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/>【讨论】：
以上是关于使用引导程序和 CSS 在背景图像上定位搜索栏和按钮的主要内容，如果未能解决你的问题，请参考以下文章