html - 是否可以为页面的一半和下面的一些内容提供背景图像，并且有一个导航菜单在我向下滚动时保持固定？

Question

我想要的是顶部导航块即使在我向下滚动时也保持固定，并且背景图像也接近导航栏下方页面的上半部分（它将是半透明的并且图像将是可见的）和下面的其他内容，以便它不会在图像顶部，而是在图像底部下方，

Answer 1

您可以在 CSS 中设置固定导航菜单

.nevmenu{
   position:fixed;
}

和半背景图像。我发现这个链接很有用。 http://www.techsirius.com/2013/08/cover-half-body-background-with-image.html

他们给出了两种方法

方法一：

body{
background-image: url(bg_img.jpg);
background-size: 100% 50%;
background-repeat:no-repeat;
}

方法二：

在 HTML 标头中复制上面的 CSS 代码

$(document).ready(function(){
var h = $(window).height();
$('body').css('background-size', '100% '+(h/2)+'px');
}

Answer 2

如果您的 HTML 看起来像

<div id="top">
     <div id="nav">... navbar goes here ...</div>
</div>
<div id="content">
     ... other content goes here ...
</div>

那么这个CSS应该可以解决问题：

#top {
     background: url(image_path);
     position: fixed; 
     top: 0;
     height: 500px; /* whatever the height of the background image is */
}

#content {
     margin-top: 500px; /* whatever you set as the height above */
}

Answer 3

试试这个 CSS

body { background-image: url('mypic.gif'); }
#nav { position: fixed; z-index: 1000; }