html - 由于背景图片,无法点击我的导航栏
问题描述
我是 HTML 和 CSS 的新手,我为一件事而苦苦挣扎。这可能很简单,但我无法弄清楚。我有一个包含ul
/li
列表的导航栏,但我添加了一个图像,我希望它在该列表后面。问题是图像涵盖了所有内容,只有当我将图像放在opacity: 0.5
或 0.2 时,我才能看到我的列表。
"slika" 是背景图片容器的 ID
* {
background-color: #181818;
scroll-behavior: smooth;
margin: 0px;
padding: 0px;
}
nav {
flex: 1.5;
}
.nav-links{
display: inline;
padding: 25px;
margin-left: 600px;
display: flex;
list-style: none;
overflow: hidden;
}
.link {
font-family: 'Poppins', sans-serif;
font-size: 20px;
color: white;
text-decoration: none;
margin: 60px;
}
#slika {
position: fixed;
background-image: url("/img/nikeshoes.png");
background-position:center;
width: 1300px;
height: 1500px;
left: 500px;
top: 10px;
opacity: 0.2;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/css.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
<title>Nike</title>
</head>
<body>
<nav>
<ul class="nav-links">
<li><a class="link" href="index.html">Home</li>
<li><a class="link" href="#">Shop</li>
<li><a class="link" href="#">Email</li>
</ul>
</nav>
<div id="slika"></div>
</body>
</html>
解决方案
您应该对覆盖导航的元素应用否定z-index
,即添加z-index: -1;
到 CSS 规则#slika
推荐阅读
- javascript - 没有上传的图片“SRC”是未定义的,即使有检查?
- c# - 将父母名单与子女名单合并
- google-cloud-dns - Google Cloud DNS 间歇性下降
- javascript - 与多个 USB 网络摄像头视频聊天
- javascript - 动态导入被添加到 webpack 包
- c# - Web API 从缓冲区流式传输图像
- codenameone - 防止 Netbeans 中的错误导入
- angular - 在 CKEditor 中获取插入符号位置
- sockets - C - 在 socketCAN 的广播管理器上发送循环消息
- c++ - 如何使用 C++ 编写具有多级指针的进程内存?