这是我的html文档,在为我的img标签添加了一个不透明度为50的类后,一切看起来都很好(我试图为其他标签添加不透明度,甚至将我的页眉设置为我的img标签sibling ,但问题仍然存在:
<!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="./fonts/fontawesome-free-6.4.2-web/css/all.css">
<title>Document</title>
<style>
@font-face {
font-family: "Ubunto";
src: url("./fonts/Ubuntu-Medium.ttf");
}
.fo-color{
color: white;
}
</style>
</head>
<body>
<div>
<header class="overflow-hidden text-white fixed">
<div class="grid grid-cols-2 w-screen h-14 bg-slate-600">
<div class="mt-2 ml-6 text-2xl" style="font-family: Ubunto;">Logo</div>
<nav class="flex justify-end ">
<a href="#" class="menu-open-btn absolute mt-3 mr-7">
<i class="fa-solid fa-bars fo-color fa-xl"></i>
</a>
<div class="w-1/3 main-menu duration-300 h-screen bg-slate-600 fixed flex items-center top-0 right-0">
<a href="#" class="menu-close-btn absolute top-4 left-5">
<i class="fa-solid fa-x fa-xl fo-color"></i>
</a>
<ul class="">
<li class="hover:text-lime-600 duration-200 ml-5">Home</li>
<li class="hover:text-lime-600 duration-200 ml-5">About Us</li>
<li class="hover:text-lime-600 duration-200 ml-5">Contact</li>
<li class="hover:text-lime-600 duration-200 ml-5">Team</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="overflow-hidden">
<div class="">
<img src="./img/businesspeople.avif" alt="photo" class="h-auto w-screen bg-indigo-500 opacity-50">
</div>
</div>
</div>
<script>
let main_menu = document.querySelector(".main-menu")
let menu_open_btn = document.querySelector(".menu-open-btn")
let menu_close_btn = document.querySelector(".menu-close-btn")
menu_open_btn.addEventListener("click", () => {
main_menu.classList.remove("translate-x-full")
main_menu.classList.add("translate-x-0")
})
menu_close_btn.addEventListener("click", () => {
main_menu.classList.remove("translate-x-0")
main_menu.classList.add("translate-x-full")
})
</script>
<script src="https://cdn.tailwindcss.com"></script>
</body>
</html>
我只有一个img标签,看起来很好,但当我使用不透明度时,它会影响一切并阻止它们. 如果你能解决我的问题,谢谢你.