使用z-index属性将菜单项的层叠顺序调整到比背景图更高的位置,可以解决背景图重叠菜单项的问题。
示例代码:
HTML:
CSS:
nav { position: relative; z-index: 1; }
.background-image { background-image: url('背景图.jpg'); background-size: cover; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
在上述代码中,将nav标签的z-index属性设置为1,将菜单项的层叠顺序提升到比背景图更高的位置,可以避免背景图重叠菜单项。同时,将背景图的z-index属性设置为0,使其在菜单项之后呈现。
上一篇:背景图由超过页脚的SVG制成
下一篇:背景图中心显示Logo