Question

有点新手，但是我想做的事情很简单;我想要一个没有边距的全屏幕背景图片，可以缩放到屏幕尺寸（我使用背景：封面;此刻）但是我想在半透明的导航条上方放置一个半透明的导航条顶部的图像顶部，包含一个水平菜单。

到目前为止，我有导航栏，但图像位于导航栏上方或下方，而不是直接位于顶部。这样做的最佳方法是z-index值，还是我应该做一些容易的事情来将一个div（.nav）放在另一个（.background-img）上？

任何帮助非常感谢，抱歉，如果这有点模糊，但我是html＆amp;的新手。 CSS !!

Answer 1

如果您尚未使用，请尝试使用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, 255, 0.7);
    top: 0;
    left: 0;
    right:0;
    padding: 16px;
}

查看演示here

半透明导航栏与背后的背景图像：CSS，没有JavaScript

1 个答案: