全屏元素与背景图像+固定菜单

时间:2015-08-10 07:31:43

标签: css

我试图通过查看它的css来了解这个网站是如何完成的:http://www.genymobile.com/

我想弄清楚的是顶部菜单元素如何从全屏元素背景图像中获取背景图像,然后在用户滚动时粘贴!?

有人能告诉我他们是怎么做到的吗?

2 个答案:

答案 0 :(得分:1)

导航栏的position设置为fixed。这允许Navbar始终保持在网页的顶部。 导航栏还包含一些Javascript动画,可将其背景颜色从gray更改为white

页面的其余部分为divwidth为100%。 这些div中的每一个都包含background-image

答案 1 :(得分:0)

导航栏div已设置position:fixed,因此它会“粘贴”#39}。即使用户滚动也能到顶部。

关于导航栏背景颜色的变化:

最初它有background-color: rgba(106, 106, 106, 0.3); - 所以因为alpha值为0.3 - 它看起来是透明的,所以它与背景图像合并。

用户滚动后 - 您可以在开发人员工具中看到新课程缩小了'是通过javascript添加的,它改变了导航栏的一些属性 - 包括背景颜色。