저는 HTML과 CSS를 처음 접했고 한 가지 어려움을 겪고 있습니다. 아마도 간단하지만 알아낼 수 없습니다. ul/ li목록이 포함 된 navbar가 있지만 이미지를 추가했고 해당 목록 뒤에 추가하고 싶습니다. 문제는 이미지가 모든 것을 덮고 이미지를 opacity: 0.50.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
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다