这是我的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标签,看起来很好,但当我使用不透明度时,它会影响一切并阻止它们. 如果你能解决我的问题,谢谢你.

推荐答案

这是因为使用值不为1的不透明度会将元素置于新的堆叠上下文中.解决这个问题的一种方法是通过在图像上添加负的z索引(如-z-10 relative)来调整z索引.(附注:图像容器上的overflow-hidden不会隐藏图像的任何部分,如果这是它应该做的.)

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

详细说明

图像最初位于所有元素后面的原因是,在相同的堆叠上下文中(也是您的情况中唯一的一个),未定位的元素将出现在z-index:auto个已定位元素的后面(任何不是position:static的元素).

因为图像和它的容器div都是position:static,它们是非定位的,而整个header设置为position:fixed,所以图像将绘制在标题后面.

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

在W3C规范3.2. Transparency: the ‘opacity’ property中:

如果不透明度小于1的元素未定位,则在其父堆叠上下文内的同一层上绘制为堆栈级别为0的定位元素.

Html相关问答推荐

如何使文本从按钮中心生长?

R中的动态Webscraping

首字下沉非字母字符

穿过整个屏幕的旋转线

Bootstrap 5.3.2模式页脚左填充还是左边距?

使用CSS Flexbox时,我的图像未对齐

Django HTML标记-Merge for Loop with Conditional语句

布局更改时的转换

(HTML框架标签)点击后目标框架将不再工作

jquery向单词中的一组字母添加跨度

复制两个

会产生一个空行;复制

元素不会

CSS 网格跨度行到所有行

如何在div中设计伪元素?

有没有办法让 textarea 在调整大小时不显示 CSS 转换?

如何将 img 元素定位到特定位置?

本地 css 样式表未链接

使用 bootstrap-icons 的未排序图标堆栈

CSS 网格自动高度不适用于特定网格区域

两个按钮范围滑块的 CSS