如何将此表单移到“carousel”上？ HTML代码
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://wallpaperscraft.com/image/asia_skyscrapers_river_top_view_night_lights_city_28590_1920x1080.jpg" width="100%" height="100%">
</div>
<div class="item">
<img src="http://eskipaper.com/images/top-city-wallpapers-1.jpg" width="100%" height="100%" class="img-responsive">
</div>
<div class="item">
<img src="http://www.creativehdwallpapers.com/uploads/large/city/top-5-city-wallpaper.jpg" width="100%" height="100%" class="img-responsive">
</div>
</div>
<div class="vertical-center">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12">
<form>
<div class="form-group">
<label for="numeutilizator">Nume de utilizator</label>
<input type="text" name="unr" class="form-control" id="numeutilizator" placeholder="Nume de utilizator">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="emr" class="form-control" placeholder="[email protected]" id="email">
</div>
<div class="form-group">
<label for="parola">Parola</label>
<input type="password" class="form-control" name="pwr" placeholder="********" id="parola">
</div>
<div class="form-group">
<input type="submit" name="r" class="btn btn-default" value="Inregistreaza-te">
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
css代码
.vertical-center {
min-height: 100%;
min-height: 100vh;
display: flex;
align-items: center;}
form
{
border-radius: 15px 15px 15px 15px;
margin:auto;
padding: 25px;
text-align: center;
background-color:rgba(237,237,237,0.5);
background-color:hsla(0, 0% ,93%,0.5);
width: 500px;
}
我尝试了z-index和许多其他东西，但我没有成功。我想要做的是将旋转木马作为背景图像。如果有人可以帮我提供建议，我可以使用其他东西而不是旋转木马但是就像幻灯片......？或链接到jsfiddle。
https://jsfiddle.net/7bzL8p2y/11/
它看起来像你几乎就在那里。你只需要在你的css中添加qazxsw poi，qazxsw poi和qazxsw poi到你的position: absolute;课程。
尝试下面的代码片段或检查这个width: 100%;，因为它在Stack Overflow片段中很难看到。我希望它有所帮助。
top: 0;.vertical-center如果您不希望表单直接连接到视口的顶部，只需将Updated Fiddle设置为您希望它远离视口顶部的距离，即.vertical-center {
min-height: 100%;
min-height: 100vh;
display: flex;
align-items: center;
position: absolute;
width: 100%;
top: 0;
}
form {
border-radius: 15px 15px 15px 15px;
padding: 25px;
text-align: center;
background-color: rgba(237, 237, 237, 0.5);
background-color: hsla(0, 0%, 93%, 0.5);
width: 500px;
}
#carousel-img {
height: 100vh;
width: 100%;
}或<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://wallpaperscraft.com/image/asia_skyscrapers_river_top_view_night_lights_city_28590_1920x1080.jpg" class="img-responsive" id="carousel-img">
</div>
<div class="item">
<img src="http://eskipaper.com/images/top-city-wallpapers-1.jpg" class="img-responsive" id="carousel-img">
</div>
<div class="item">
<img src="http://www.creativehdwallpapers.com/uploads/large/city/top-5-city-wallpaper.jpg" class="img-responsive" id="carousel-img">
</div>
</div>
<div class="vertical-center">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12">
<form>
<div class="form-group">
<label for="numeutilizator">Nume de utilizator</label>
<input type="text" name="unr" class="form-control" id="numeutilizator" placeholder="Nume de utilizator">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="emr" class="form-control" placeholder="[email protected]" id="email">
</div>
<div class="form-group">
<label for="parola">Parola</label>
<input type="password" class="form-control" name="pwr" placeholder="********" id="parola">
</div>
<div class="form-group">
<input type="submit" name="r" class="btn btn-default" value="Inregistreaza-te">
</div>
</form>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>;