添加不透明度后一切都停止工作（在 Tailwind 中）-解网

问：

这是我的HTML文档。为我的标签添加一个类后，一切看起来都很好（我试图为其他标签添加不透明度，甚至使我的标题成为我的标签同级，但问题仍然存在）：opacity-50imgimg

<!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

HTML 尾风 CSS

这是因为使用值小于 1 的不透明度会将元素置于新的堆叠上下文中。解决此问题的一种方法是通过添加负 z 索引（例如在图像上）来调整 z 索引。（旁注：如果这是图像的本意，则图像容器不会隐藏图像的任何部分。-z-10 relativeoverflow-hidden

<img src="./img/businesspeople.avif" 
  alt="photo" class="h-auto w-screen bg-indigo-500 opacity-50 
  -z-10 relative">

详细说明

图像最初位于所有内容后面的原因是，在相同的堆叠上下文中（以及您的案例中唯一的上下文），未定位的元素将出现在定位元素（任何不是的元素）后面。z-index:autoposition:static

由于图像及其容器 div 都是非定位的，而整体设置为，图像将绘制在标题后面。position:staticheaderposition:fixed

但是，如果在未定位的元素上将不透明度设置为小于 1，则该元素将作为堆栈级别为 0 的定位元素绘制在其父堆叠上下文中的同一图层上。现在，由于标题和图像都被视为在同一堆叠上下文中没有正堆栈级别的定位元素，因此 DOM 中出现的后者（即图像）将绘制在前面。

在 W3C 规范 3.2 中。透明度：“不透明度”属性：

如果未定位不透明度小于 1 的元素，则在其父堆叠上下文中，该元素将作为堆叠级别为 0 的定位元素绘制在同一图层上。

添加不透明度后一切都停止工作（在 Tailwind 中）

Everything stops working after add opacity (in Tailwind)

评论

详细说明

评论