HTML – 背后隐藏着背景图片的半透明导航栏：css,没有javascript

概述一点点新手,但试着做一些我认为会很简单的事情;我想要一个没有边距的全屏幕背景图像,可以缩放到屏幕尺寸(我正在使用背景：封面;此刻)但是我想在图像的顶部放置一个半透明的导航栏顶部,包含水平菜单. 到目前为止,我有导航栏,但图像位于导航栏上方或其下方,而不是直接位于顶部.这样做的最好方法是z-index值,还是我应该做一些简单的事情来将一个div(.nav)放在另一个(.background-img) 一点点新手,但试着做一些我认为会很简单的事情;我想要一个没有边距的全屏幕背景图像,可以缩放到屏幕尺寸(我正在使用背景：封面;此刻)但是我想在图像的顶部放置一个半透明的导航栏顶部,包含水平菜单.

到目前为止,我有导航栏,但图像位于导航栏上方或其下方,而不是直接位于顶部.这样做的最好方法是z-index值,还是我应该做一些简单的事情来将一个div(.nav)放在另一个(.background-img)上？

任何帮助非常感谢,抱歉,如果这有点模糊,但我是HTML&的新手. CSS！

解决方法 尝试使用position：fixed;如果你还没有.做这样的事情：

div.background-img {    background-image: url('background.png');    margin: 0;    padding: 0;    position: fixed;    top: 0;    left:0;    right:0;    bottom:0;    background-size:cover;}div.nav {    position: fixed;    background: rgba(255,255,0.7);    top: 0;    left: 0;    right:0;    padding: 16px;}

查看演示here

总结

以上是内存溢出为你收集整理的HTML – 背后隐藏着背景图片的半透明导航栏：css,没有javascript全部内容，希望文章能够帮你解决HTML – 背后隐藏着背景图片的半透明导航栏：css,没有javascript所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。