我想制作一个包含3张图片的滑块,但是我遇到了一个问题。
我想把图像放在头顶上..
我将导航栏高度设置为:0,以将导航栏放在标题上方。
您可以看到代码,并且图像将向您显示我所需要的
$('.header').height($(window).height());
.my-navbar
{
height: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="my-navbar">
<div class="my-container">
<div class="user">
<i class="fa fa-user-circle-o" aria-hidden="true"></i>
<a href="#" class="upper">login</a>
<span class="separator">|</span>
<a href="#" class="upper">register</a>
</div>
<div class="clearfix"></div>
<div class="social"> <!-- social and search icon-->
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-youtube" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-search" aria-hidden="true"></i></a>
</div>
<div class="clearfix"></div>
<div class="links upper txcolor">
<a href="#">news</a>
<span>|</span>
<a href="#">download</a>
<span>|</span>
<a href="#">usefull links</a>
</div>
</div>
</div>
<div class="header">
<!--<div class="slider">
<div class="my-container">
<div class="slider-images">
</div>
<div class="slider-text">
<h3>Four Wheels move the body</h3>
<h1> Two wheels move the soul</h1>
</div>
</div>
</div> -->
<img src="images/motors/m1.png">
</div>
<div class="menu">
<img src="images/logo.png" >
</div>
最佳答案
.slider {
height: 100vh;
width: 100%;
background-position: 50% 50%;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-attachment: fixed;
padding: 0;
margin: 0;
}
根据滑块的显示属性,您可能还需要将其更改为
display:table;